Best practice to update a form value from state and prop within React

react
1

Hey,

Facebook recommends not to use the componentwillreceiveprops function. So I am searching for the current workaround that will update a form input value from a prop, but let the input be changeable via keyboard (onChange). In my case the prop is used to update the value with withTracker, but I also can set the value manually by keyboard.

Consider following Component:

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  render() {
    return (
      <form>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
      </form>
    );
  }
}

export default withTracker(props => {

	Meteor.subscribe('subFunc');

	return {
		subscription: AnyResource.findOne({})
	}

})(NameForm);

Now I am wondering which lifecycle method can be used to update the state from the prop instead of componentwillreceiveprops.

Thanks

2

Hi @radykal,

I was using getDerivedStateFromProps, but now im just not updating forms reactively, that was generating some confusion for the users. Now I just map the needed props to the state initially and dont update them later if they change.

You can check getDerivedStateFromProps here: