Q:

Set state of object property

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?

A:

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.

