import React, { Component } from "react";

const SightingList = (props) => {
  console.log(props)
  return(
    <div>
      <h1>Sighting List</h1>
      {props.sightings.map(s=>
        <ul>
          <li>
            {s.scientificName}
          </li>
          <li>
            {s.count}
          </li>
          <li>
            {s.sex}
          </li>
        </ul>
        )}
    </div>
  )
}

export default SightingList;
import React, { Component } from 'react';

const SightingList = props => {
  console.log(props);
  return (
    <div>
      <h1>Sighting List</h1>
      {props.sightings.map(s => (
        <ul>
          <li>{s.scientificName}</li>
          <li>
            Count:
            {s.count}
          </li>
          <li>
            Sex:
            {s.sex}
          </li>
          <li>
            Lat:
            {s.lat}
          </li>
          <li>
            Long:
            {s.lon}
          </li>
        </ul>
      ))}
    </div>
  );
};

export default SightingList;

Add lat, long labels to profile Sighting List for readability
Add lat, long labels to profile Sighting List for readability
