reactjs - wait for useEffect to update state in order to pass down props?

Question

I have a parent component that is fetching data from an api, I would like to fetch it once on render and set it to state and pass it down as props to a child component that will then map over this state. How can I wait for 'bids' to have items before the child component renders? I thought by passing setBids it would wait until bids is set, but instead im getting an empty array to map over

function Parent () {

const [bids, setBids] = useState([]);

  useEffect(() => {
    const fetchBids = async () => {
      const result = await api.GetBids();
      setBids(result.body);
    
    };

    fetchBids();
}, [ setBids ]);

return ( <Child bids={bids}/>)

}

export default Parent;

function Child(props) {

  const { bids, id } = props;
 
  return (
    <Fragment>
      
      {bids.map((responseBidId) => {
          if (responseBidId === id) {
          return (
            <button onClick={handleView}>view</button>
          );
        } else {
          return (
            <Button
              onClick={handleUpload}
            >
              Upload
            </Button>
          );
        }
      })}
    </Fragment>
  );
}

export default Child;

Answer 1

You could wait for bids to be populated before rendering the child:

const [bids, setBids] = useState();

return bids ? <Child bids={bids}/> : null;