componentWillRecieveProps method is not working properly: ReactJS

Question

The following child component receives props from its parent. It then sets the props to it\'s own state using getInitialState and renders the value to the corre

Answer 1

I am potentially using componentWillRecieveProps incorrectly?

Yes, because you need to use props.keyname (props the parameter passed to this method), instead of this.props in componentWillReceiveProps.

Reason is, inside this lifecycle method this.props will have the previous props values not the new one, after this lifecycle method this.props will have the new props values.

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.

This is because componentWillReceiveProps will get called for each setState inside parent, so before setting the newprops inside child component first we should compare the prev value and new value, may be inside parent some other state value has been changed not the one we are passing to child component.

Do console.log on this.props and the newProps and check the result.

Use this:

componentWillReceiveProps: function (newProps) {
    this.setState({
        pitch: newProps.booking.pitch,
        email: newProps.booking.email,
        firstName: newProps.booking.firstName,
        arrivalDate: newProps.booking.arrivalDate,
    })
    console.log('previous value', this.props);    //print the previous values
    console.log('new values', newProps);          //new values
},