personListing.component.jsx

import { useState, useEffect } from 'react';

import { mockFetch } from '../util/mockAPI.js';

import '../assets/style/personListing.css';

import Person from './person.component.jsx';


const PersonListing =  props  => {
   const  { started, delay } = props;

   const [persons, setPersons ] = useState([]);

   const fetchData = async () => {
      const data = await mockFetch('http://source.of.data/persons',10);
      setPersons( data );
   }      

   useEffect( () => {
      fetchData();            
   }, []);

   const personComponents = persons.map(person => <Person 
                                                      {...person}
                                                      {...props}                                                      
                                                      key={person.id}                                                       
                                                   />);

   return (
      <div className="personListing">
         People getting older every {delay} seconds
         {personComponents}
      </div>
   );
}
export default PersonListing;