title: React state changing on change copy of original state?
body: <p>I am trying to make a simple game like purple pairs in Purple palace game using React. I have a method named <code>clickBtn</code>, it is supposed to increment the count on click and decrement on second click but I don't know why the <code>handleClick</code> method is changing <code>chosen</code> and <code>clicked</code> property of state even if a copy of the new state is made without using <code>setState</code> method. Can you help me fix this?</p>
  <pre class="lang-js prettyprint-override"><code>class GameBoard extends React.Component {
    constructor() {
      super();
      this.state = {
        score: 0,
        time: 0,
        list: [...generateObList(), ...generateObList()],
        count: 0
      };
    }
  
    handleClick = (id) =&gt; {
      this.clickBtn(id);
      const list = this.state.list.slice();
      const current = list.find((a) =&gt; a.id === id);
      for (let x of list) {
        if (x.clicked &amp;&amp; x.value == list.find((a) =&gt; a.id == id).value) {
          x.chosen = true;
          x.clicked = false;
          current.chosen = true;
          current.clicked = false;
          // this.setState((prev) =&gt; ({
          //   list: prev.list.map((el) =&gt;
          //     el.id === id ? current : el.value === current.value ? x : el
          //   ),
          //   score: prev.score + 1
          // }));
        }
      }
    };
  
    clickBtn = (id) =&gt; {
      const current = this.state.list.slice().find((e) =&gt; e.id === id);
      let deClick = current.clicked;
      current.clicked = !current.clicked;
      console.log(current);
      this.setState(
        (prev) =&gt; ({
          list: prev.list.map((el) =&gt; (el.id === id ? current : el)),
          count: prev.count + (deClick ? -1 : 1)
        }),
        () =&gt; {
          console.log(this.state.count, deClick, current);
        }
      );
    };
  
    render() {
      const boardStyle = {
        gridTemplateColumns: `repeat(5, 1fr)`,
        gridTemplateRows: `repeat(5,1r)`
      };
      let list = this.state.list.map((n) =&gt; (
        &lt;Card
          value={n.value}
          onClick={(e) =&gt; {
            this.handleClick(n.id);
          }}
          show={!n.chosen}
        /&gt;
      ));
      return (
        &lt;div class=&quot;gameBoard&quot; style={boardStyle}&gt;
          {list}
        &lt;/div&gt;
      );
    }
  }
  </code></pre>