BirdSanctuary.js

import React, {useState, useEffect} from 'react'

const BirdSanctuary = props => {
  // for example's sake, here is a default array of birds
  const [birds, setBirds] = useState([
    {id: 3, name: 'Polly', fed: false},
    {id: 4, name: 'Tina', fed: true},
    {id: 5, name: 'Marlow', fed: false}
  ])
  
  useEffect(()=>{
    setBirds(props.getBirds())
  },[])
  
  const feedBird = birdId => {
    // updates bird feed status locally and on our database
  }
  
  return (
    <>
      <h1>Welcome to the Jasmine Bird Sanctuary</h1>
      {birds.map(bird => <SingleBird bird={bird} feedBird={feedBird} />}
    </>
  )
}

export default BirdSanctuary