How to check that a certain prop has received?

Question

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

score 0 · Answer 1 · answered Mar 18 '22 at 14:43

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}’
}

How to check that a certain prop has received?

1 Answers1