数据保存到state后显示来自mongo的数据 - React hooks

Question

I am creating an app with a search box, that when submitted will get data from mongo and display the data. The problem is I am unsure of how to ensure the data is fully saved in state before I display it. This leads to issues where it says "property x is undefined". I can't seen to find a definitive way of doing it and I am a beginner to React also.

My current thinking is to use useEffect with a dependency array of loading to check when data is fully loaded before displaying data. But I am not sure where to set the state that the data has loaded and change loading to true
I have 3 parts currently getData (gets data from Mongo), displayData (attemping to display one field at the moment) and render

getData

 const getData = async (e) => { e.preventDefault(); // setLoading(true); fetch(API_URL + id).then(response => response.json()).then(data => { setContact(data); setLoading(true); }); console.log("DATA SAVED"); };

displayData

 const displayExperience = (contact) => { return contact.experience.map((exp, index) => ( <div key={index}> <h3>{exp.company}</h3> </div> )); };

NOTE: experience is an array of objects, containing info on a contacts work experience. THis array of objects I beleive is causing the issue as I can display a single field of contact but cannot display anything within experience object due to undefined error

render

 return ( <div className="App"> <Form onSubmit={getData}> <div className="App"> <Form.Group> <Form.Label>ID</Form.Label> <Form.Control type="text" placeholder="Add ID" onChange={(e) => setId(e.target.value)}/> </Form.Group> <Button className="mt-2" variant='dark' type="submit" >Submit</Button> </div> </Form> <div> {displayExperience(contact)} </div> </div> )

States

 const [contact, setContact] = useState([]); const [loading, setLoading] = useState(false); const [id, setId] = useState('');

Any suggestions for how best to save state fully so I can display without undefined errors. Again the issue seems to be as one of the fields returned is an array of objects. I beleive I should add a useEffect function and can be seen in *getData* where I attempted to set loading state.