title: Why is the state mutating if I am using spread operator?
body: <p>I have this code that I am testing on jsfiddle</p>
  
  <pre><code>onVote = (dir, index) =&gt; {        
      console.log(this.state)
  
      const products = [...this.state.products]           
      products[index].votes = dir ? products[index].votes + 1 : products[index].votes - 1
  
      console.log(this.state.products[index].votes)
      // this.setState({products})
    };
  </code></pre>
  
  <p><a href="https://jsfiddle.net/hkL3wug7/2/" rel="nofollow noreferrer">https://jsfiddle.net/hkL3wug7/2/</a></p>
  
  <p>However, even though I am not setting State, the console log shows that the state is changes every time I click on the plus and minus signs.</p>
  
  <p>I did the same as in this article <a href="https://medium.com/@giltayar/immutably-setting-a-value-in-a-js-array-or-how-an-array-is-also-an-object-55337f4d6702" rel="nofollow noreferrer">https://medium.com/@giltayar/immutably-setting-a-value-in-a-js-array-or-how-an-array-is-also-an-object-55337f4d6702</a></p>
  
  <pre><code>const newState = [...state] // clone the array
        newState[action.index].done = true
        return newState
  </code></pre>
  
  <p>as far as I understand</p>
  
  <p>(it is not duplicate of the other question, I am not asking for an efficient way)</p>