javascript - 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 corresponding input fields using this.state.

I'm using componentWillRecievePropsto update the state of the child component when it receives new props.

Initially when the component is called it works correctly. The issue occurs when it's passed props for a second time, the corresponding button that triggers the props to be passed requires two clicks to set the child's state.

I am potentially using componentWillRecieveProps incorrectly?

getInitialState: function() {
  return {
    pitch: this.props.booking.pitch,
    email: this.props.booking.email,
    firstName: this.props.booking.firstName,
    arrivalDate: this.props.booking.arrivalDate,
  }
}, 

componentWillReceiveProps: function (props) {
  this.setState({
    pitch: this.props.booking.pitch,
    email: this.props.booking.email,
    firstName: this.props.booking.firstName,
    arrivalDate: this.props.booking.arrivalDate,
  })
},

Full Code:

var React = require('react');
var createReactClass = require('create-react-class');

var ViewBooking = createReactClass({
  getInitialState: function() {
return {
  pitch: this.props.booking.pitch,
  email: this.props.booking.email,
  firstName: this.props.booking.firstName,
  arrivalDate: this.props.booking.arrivalDate,
}
  }, 

  componentWillReceiveProps: function (props) {
this.setState({
  pitch: this.props.booking.pitch,
  email: this.props.booking.email,
  firstName: this.props.booking.firstName,
  arrivalDate: this.props.booking.arrivalDate,
})
  },
 
  _handleInputChange: function(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
var partialState = {};
partialState[name] = value;
console.log(partialState);
this.setState(partialState);
  },

  _handleUpdateClose: function(e) {
this.props.updateClose();
e.preventDefault();
  },

  _handleUpdateBooking: function (e) {
var tempBooking = {
  pitch: this.state.pitch,
  email: this.state.email,
  firstName: this.state.firstName,
  arrivalDate: this.state.arrivalDate,
}
this.props.updateBooking(tempBooking);
e.preventDefault();
  },

  _handleDelete: function (e) {
this.props.deleteBooking();
e.preventDefault();
  },

  render: function() { 
if (this.props.viewFormVisibility) {
formVisibility = {"display": "block"};  
} else {
formVisibility = {"display": "none"};
}

return (
<div>
<form style={formVisibility}>
<h4>View Booking</h4>
<div className="form-group row">
  <label className="col-2 col-form-label">Pitch</label>
  <div className="col-10">
<input value={this.state.pitch} onChange={this._handleInputChange} className="form-control" name="pitch" ref="inputPitch" type="number" id="example-number-input"/>
  </div>
</div>
  <div className="form-group row">
<label  className="col-2 col-form-label">First Name</label>
<div className="col-10">
  <input value={this.state.firstName} onChange={this._handleInputChange} className="form-control" ref="firstName" name="firstName" type="text" id="example-text-input"/>
</div>
  </div>
  <div className="form-group row">
<label className="col-2 col-form-label">Email</label>
<div className="col-10">
  <input value={this.state.email} onChange={this._handleInputChange} className="form-control" ref="inputEmail" type="email"  name="email" id="example-email-input"/>
</div>
  </div>
  
  <div className="form-group row">
<label className="col-2 col-form-label">Date</label>
<div className="col-10">
  <input value={this.state.arrivalDate} onChange={this._handleInputChange} className="form-control" ref="arrivalDate" name="arrivalDate" type="date" id="example-date-input"/>
</div>
  </div>
  <button type="submit" className="btn btn-primary" onClick={this._handleUpdateBooking}>Save changes</button>
  <button className="btn btn-danger" onClick={this._handleUpdateClose}>Close</button>
  <button onClick={this._handleDelete} className="btn btn-danger">Delete</button>
</form>
  </div>
)
  }
})
 
module.exports = ViewBooking;     

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