I have home page with a table having few entries. Above table I have button called add entry. When user clicks on add entry, it opens a modal, where user can add few details and submit it. The submit button makes API call to store the data in database. Once the API call is successful, the modal closes. Now , how do I refresh the parent component after modal closes so that the newly added data can be shown in table (which is loaded via API call). I'm using functional components. I'm looking for steps that I should follow, not full code (pseudo code will do ). I'm not using redux. i dont want to do winow.reload(). as it reloads the whole page.
make an async fetchData function that will fetch you table data all you have passed that fetchData function to modal and on success call that fetch function
const [loading,setLoading] = useState(false)
const [data,setData] = useState()
const fetchPlans = async () => {
try {
setLoading(true);
const getDataRes = await getData();
// save that data in state that will reredener page
setData(getDataRes.data);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
} catch (error) {
console.log(error)
} finally {
setLoading(false);
}
};
</>
You can create a callback function in the parent component and pass it to children component as a property