title: state history not updating properly in react
body: <p>I'm building a tower of Hanoi game to get used to react. I have a state property called "disks", which is an array consisting of 3 arrays of length N (N being the total number of disks). I also have defined a state property "history" which is supposed to contain the history of the disks array like this:</p>
  
  <ol>
  <li><strong>intially:</strong> history = [disks(Initial config)]</li>
  <li><strong>After 1 move:</strong> history = [disks(Initial config), disks(after 1 move)]</li>
  <li><strong>After 2 moves:</strong> history = [disks(Initial config), disks(after 1 move), disks(after 2 move)] etc.</li>
  </ol>
  
  <p>However, after M moves, the history array looks like this:</p>
  
  <p>history = [disks(after M moves), disks(after M moves), ... , disks(after M moves)].</p>
  
  <p>I can't find my mistake. Would appreciate it if anyone had an idea what's going wrong. Here is the relevant code: </p>
  
  <pre><code>constructor(props){
      super(props);
      let disks = [
        [],
        [],
        []
      ];
      //Initially all disks in first tower
      for(let i=0; i&lt;props.numberOfDisks; i++){
        disks[0].push(i);
      }
  
      this.state = {
        disks : disks,
        selected : null,
        move: 0,
        history: [disks]
      };
    }
  
    handleClick(i){
      const disks = this.state.disks.slice();
      const history = this.state.history.slice();
      let move = this.state.move;
      let selected = this.state.selected;
      //if user has not previously selected a tower or selects the same tower again
      if(selected===null || i===selected){
        selected = disks[i].length&gt;0 &amp;&amp; i!==selected ? i : null;
        this.setState({
          selected : selected
        });
        return;
      }
      //Check if move is legal
      //index is at bottom is 0 and the largest disk has id 0
      if(disks[i].length === 0 || disks[i][disks[i].length-1] &lt; disks[selected][disks[selected].length-1]){
        //perform move
        disks[i].push(disks[selected].pop());
        move++;
        // I guess this is where it goes wrong, but I can't see why
        this.setState({
          history: history.concat([disks]),
          disks: disks,
          move: move
        });
      }
      this.setState({
        selected: null
      });
      console.log(this.state.history);
    }
  </code></pre>
  
  <p>Please note that the game is otherwise working, meaning the disks array is updating properly etc... It's just the update of the history array that goes wrong somehow. I tried putting disks.slice() into the history.concat as it seemed to me that the history is somehow storing references to the disks array, but that didn't help.</p>