I have an synchronization issue. I want to check props is loaded or not to child component. I have wrote a code like that :
componentDidMount() {
setTimeout(() => {
this.setState({
editorContent: this.props.json[this.state.contentType],
});
}, 2500);
}
Here I'm using 'setTimeout' function. In render function I'm using 'editorContent' state so this is undefined if I don't use 'setTimeout'. After 1 or 2 sec. props received and it won't be undefined. I guess there is better solution for that. Thanks all
This method is completely not sustainable instead you should use useEffect let me demonstrate by code in functional component.
//cildComponent.js
export default ChildComponent(props){
const [pending , setPending] = useState(true)
useEffect(()=>{
if(props.name){
// now you have the name available
setPending(false);
}
},[props])
if(pending){
return “loading”
}
return ‘your name is ${props.name}’
}