Update state values with props change in reactjs

Question

I have a modal component that should be called when setState changes but for some reason it is not updating. In the first file Im setting the following in render.

Answer 1

No constructor will not get called when component re-rendered, it will get called only on initial rendering.

I think, there are two ways by which you can solve your issue:

1. Use componentWillReceiveProps(){ lifecycle method it will get called whenever any change happens to props values, so you can update the Modal component state value showModal here, like this:

componentWillReceiveProps(nextProp){
   this.setState({
      show: nextProps.showModal
   });
}

As per DOC:

componentWillReceiveProps() is invoked before a mounted component receives new props. If you need to update the state in response to prop changes (for example, to reset it), you may compare this.props and nextProps and perform state transitions using this.setState() in this method.

2. Don't store the props value in state variable and directly use this.props.showModel in Model component, by this way whenever any change happens to props values, Modal component will take the updated values.