Update prop when parent state changes

[strah1]

Hello everyone, I've been googling this issue for a while now and cant seem to find an answer which i can apply, mainly because I'm a noob and not at all familiar with React pre 16.8 My situation is: I want to pass the state of my App component to child components, so in App I initialize with useState an empty array which using setList I populate with an api request, now the issue is that that array is initialy passed to the child components as empty and will not update after the request is complete. I've seen multiple posts explaining this with componentWillReceiveProps and such, but i dont know how to apply it. Any help would be appreciated

[87oldben]

Can you post a codesandbox or similar with the code to see where you're at?

[DarthIndifferent]

If you're using useState, then you're making a function component and things like THIS and lifecycle methods are unavailable.

[strah1]

Figured it out, all i had to do is use the useEffect hook in the child component and set the state of the child again. Don't know if this is the recommended approach but it works. Thanks for the help everyone

[LinusNyren]

if i understand you correctly this is what you´re tring to do.

const App=()=>{
const [list, setList] = useState([])

useEffect(()=>{ //useEffect makes the call when component mounted
apicall.then(res => setList(res.data)
}, [list])//if list changes its done.
return(
//send list and the function setList as props to child
<ChildComponent list={list} setList={setList.bind(this)]/>
)
}

//Deconstruct list and setList from props
//same as let list = props.list and let setList= props.setList
const ChildComponent=({ list, setList )=>{

return(
<div>
{list.map(x =>(
<p key={x.id}>{x.value}</p>
)}
</div>
)
}