Mutating nested object/arrays as states in React : <p>I am using React components which look like this (a simplified version of the components I used, below).</p>

<p>My question is: how to make the same but using this.setState?
The below code works, but I am mutating the state directly, and I am receiving the following warning:</p>

<blockquote>
  <p>Do not mutate state directly. Use setState()</p>
</blockquote>

<pre><code>class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      playerState: [
        {
          name: 'Jack',
          hp: 30
        },{
          name: 'Alan',
          hp: 28
        }
      ],
    };
  }
  lowerPlayerHealth = (index) =&gt; () =&gt; {
    this.state.playerState[index].hp = this.state.playerState[index].hp - 1
    this.forceUpdate();
  }
  render() {
    return (
      &lt;div className="App"&gt;
        &lt;p&gt;Player 1: {this.state.playerState[0].name}&lt;/p&gt;
        &lt;p&gt;Health: {this.state.playerState[0].hp}&lt;/p&gt;
        &lt;button onClick={this.lowerPlayerHealth(0)}&gt;Hit player 1&lt;/button&gt;
        &lt;p&gt;Player 2: {this.state.playerState[1].name}&lt;/p&gt;
        &lt;p&gt;Health: {this.state.playerState[1].hp}&lt;/p&gt;
        &lt;button onClick={this.lowerPlayerHealth(1)}&gt;Hit player 2&lt;/button&gt;
      &lt;/div&gt;
    );
  }
}
</code></pre>

<p>When rendered, it looks like this:</p>

<p><a href="https://i.stack.imgur.com/3aRXA.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3aRXA.jpg" alt="enter image description here"></a></p>
