I have a parent component which is like this :
function parentComponent(){
const [selectedValue,setSelectedValue] = useState();
const [renderComponent,setRenderComponent] =[
{
name:'A' ,
component : <ChildComponent values={selectedValue}/>
},
{
name:'B' ,
component : <OtherComponent/>
},
]
useEffect(()=>{
const response = api('someapi');
//i can get the response correctly and save it to state
if(response.status===200){
setSelectedValue(response.data);
}
},[])
return <>{renderComponent[0].component}</>
}
and my child component is :
function childComponent({values}){
console.log('Props value is : ', values)
return <h3>Something</h3>
}
The problem is props are not updating and continue to return 'undefined' even after I update the state from the parent component
useEffect(()=>{
//set your state only after api data is completely fetched
api('someapi').then((response)=>{
console.log(response);// make sure this is not undefined
if(response.status===200){
setSelectedValue(response.data);
}
});
},[])