Change state of nested object props based on user input handleChange

Question

I have this component state

this.state = {
      title: "",
      salary: {
        min: "",
        max: "",
        single: ""
      }
}

I use this function for handling user input

handleInputChange = (e) => {
    this.setState({[e.target.name]:e.target.value});
}

it works with

<input type="text" id="title" name="title" onChange={this.handleInputChange}/>

Can I use such a function to change this.state.salary.min/max ...

I mean can this type of function work with nested objects in state and <input/> name art?

Answer 1

Yes you can, but you need to update whole nested object.

You have several options:

Object.assign()

const salary = Object.assign({}, this.state.salary, { min: minValue });

this.setState({ salary });

Spread operator

const salary =  {
    ...this.state.salary,
    min: minValue
}

this.setState({ salary });

Immutable data structure

Immutable.js

this.state = {
    salary = Immutable.Map({ 
        min: 8,
        max: 10
    });
};

const salary = this.state.salary.set('min', minValue);

this.setState({ salary });

Immutability helper

See https://reactjs.org/docs/update.html

const salary = update(this.state.salary, {
    min: minValue
});

this.setState({ salary });