title: ReactJS: Update nested state object properties without replacing whole object using setState()
body: <p>I am trying to apply best practices when changing multiple property values of a nested object in my component's state. </p>
  
  <p>My component code currently looks like this:</p>
  
  <pre><code>class App extends Component {
    state = {
      object: {
        a: 10,
        b: 7,
        c: 12,
      }
    }
    render() {
      return (
        &lt;div&gt;
          &lt;button onClick={this.setState({ object: { a: 5 }})}&gt;change value a &lt;/button&gt;
          &lt;button onClick={this.setState({ object: { b: 2 }})}&gt;change value b &lt;/button&gt;
          &lt;button onClick={this.setState({ object: { c: 3 }})}&gt;change value c &lt;/button&gt;
        &lt;/div&gt;
        &lt;p&gt;{this.state.object.a}&lt;/p&gt;
        &lt;p&gt;{this.state.object.b}&lt;/p&gt;
        &lt;p&gt;{this.state.object.c}&lt;/p&gt;
      );
    }
  }
  </code></pre>
  
  <p>Before any button is clicked, you see three buttons followed by paragraphs reading <code>10</code>, <code>7</code> and <code>12</code> on the page. </p>
  
  <p>Once I click the first button labeled "change value a", value <code>b</code> and <code>c</code> are  destroyed in my components state object which causes only the value of <code>5</code> to show. If I click the second button, then only <code>2</code> will show and prop <code>a</code> and <code>c</code> are gone. </p>
  
  <p>I understand the behaviour, however I would like to know the best way to solve it. I want to keep it so all the values showing, and be able to update them in any order while the other values remain.</p>
  
  <p>I am also pretty sure I am mutating the state directly and I know this is bad practice. I just don't know the right practice in this situation.</p>