Set state of object property

Question

I have this factory method that creates functions for each change handler:

makeHandleChange = changedProperty => newVal => {
    const newState = { ...this.state, [changedProperty]: newVal };
    this.setState({ ...newState });
  };

It is being executed for example like that:

onChange={this.makeHandleChange('phoneNumber')}

How can I set the state of a property object using this function?

For example I have to setState the info.phoneNumber property:

state = {
    info: {
       phoneNumber: '',
    },
}

How can I do that with this makeHandleChange function?

Possible duplicate of https://stackoverflow.com/questions/43040721/how-to-update-nested-state-properties-in-react — Monica Acha, Jan 28 '19 at 12:15

score 1 · Accepted Answer · answered Jan 29 '19 at 00:55

There are two ways to get this to work. One is to update your factory code so that it takes into consideration of nested state properties. The other, and probably the easier way is to pass in the entire nested object when you need to update the state.

For example, if you have a input field that updates the phoneNumber property nested in this.state.info:

    <input
      type="text"
      onChange={e => this.makeHandleChange("info")({ ...this.state.info, phoneNumber: e.target.value})}
      value={this.state.phoneNumber}
    />

In the object you pass in to the function, make sure you destruct this.state.info (i.e. ...this.state.info) before setting the new value so that none of the other nested properties gets overwritten/removed.

Thank you for your well explained answer! – user3378165 Jan 29 '19 at 08:25 — user3378165, Jan 29 '19 at 08:25

Treycos · Answer 2 · 2019-01-28T13:28:58.410

You could do the following by destructing your previous info state property :

makeHandleChange = changedProperty => newVal => {
    this.setState(prev => ({ info: { ...prev.info, [changedProperty]: newVal } }));
};

This solution uses the callback version of setState.

It does the equivalent of the following code:

makeHandleChange = changedProperty => newVal => {
    const { info } = this.state
    this.setState({ info: { ...info, [changedProperty]: newVal }});
};

Set state of object property

2 Answers2