title: React.js - How to stop setInterval and resume it after click
body: <p>I am developing Game of Life using React.js. Everything works so far, but I would like to add extra feature which would allow to stop the game (cycle) and resume it if needed. And I don't know how can I do it. So inside the main class I have a method / function that starts the game and which is triggered after clicking a button defined in render():</p>
  
  <pre><code>  constructor(props) {
      super(props);
      this.state = {cellStates: Array(TOTAL_FIELDS).fill(0), cellID: Array(TOTAL_FIELDS), gameRunning: false, counter: 0}; //set and fill initial states
  
      this.changeState = this.changeState.bind(this);
  
      this.resetGame = this.resetGame.bind(this);
      this.startGame = this.startGame.bind(this);
      this.stopGame = this.stopGame.bind(this);
      this.showGameStatus = this.showGameStatus.bind(this);
  
      for (let o = 1; o &lt;= TOTAL_FIELDS; o++)
      {
        this.state.cellID[o-1] = o;
      }
    }
  
  startGame() {
      function checkZeros(arr) { //check if board is blank
        return arr === 0;
      }
  
      if (!this.state.cellStates.every(checkZeros)) {
        alert ('Game starts!');
        let cycle = this.state.counter; //define number of life cycle
  
        this.setState(() =&gt; {
          return {
            gameRunning: true //game is on
          };
        });
  
        $('#reset-button').attr("disabled", "disabled");
        $('#start-button').attr("disabled", "disabled");
        $('#stop-button').removeAttr("disabled"); //handle buttons
  
  
        let goGame = setInterval(() =&gt; {
          const newStates = [];
  
          for (let x = 0; x &lt; TOTAL_FIELDS; x++) {
            if (this.state.cellStates[x] === 0) {  //cell is dead
              if (this.calculateCellsAround(x) === 3)
              {
                newStates.push(1);
              }
              else {
                newStates.push(this.state.cellStates[x]);
              }
            }
            else {  //cell is alive
              if (this.calculateCellsAround(x) === 3 || this.calculateCellsAround(x) === 2)
              {
                newStates.push(this.state.cellStates[x]);
              }
              else {
                newStates.push(0);
              }
            }
          }
          this.setState(() =&gt; {
              return {cellStates: newStates, counter: cycle++};
          });
        }, 50);
      }
      else {
        alert ("Please fill at least one cell to launch a game.")
      }
    }
  
    render() {
      return (
        &lt;div style={{marginTop:0+"px"}} key="wrap-it-all"&gt;
          &lt;Header /&gt;
          &lt;Grid&gt;
            &lt;Row&gt;
              &lt;Col md={12}&gt;
                &lt;div className="board-outline"&gt;
                  {this.createMap(140, TOTAL_FIELDS)}
                &lt;/div&gt;
              &lt;/Col&gt;
            &lt;/Row&gt;
            &lt;Row&gt;
              &lt;Col md={12}&gt;
                &lt;button id="start-button" onClick={() =&gt; this.startGame()}&gt;Start&lt;/button&gt;
                &lt;button id="stop-button" onClick={() =&gt; this.stopGame()}&gt;Stop&lt;/button&gt;
                &lt;button id="reset-button" onClick={() =&gt; this.resetGame()}&gt;Reset&lt;/button&gt;
                &lt;p style={{color:`#fff`}}&gt;Lifecycle: &lt;span className="lifecycle"&gt;{this.state.counter}&lt;/span&gt;. Game is &lt;span className="gamerun"&gt;{this.showGameStatus()}&lt;/span&gt;.&lt;/p&gt;
                &lt;Alert className="disclaimer" bsStyle="warning"&gt;
                  &lt;strong&gt;Instruction:&lt;/strong&gt; Select the initial state of cells and press the [Start] button.
                &lt;/Alert&gt;
              &lt;/Col&gt;
            &lt;/Row&gt;
          &lt;/Grid&gt;
        &lt;/div&gt;
      );
    }
  </code></pre>
  
  <p>I assume it all has something to do with mount/unmount built in functions but I have no idea how to use them in order to make it all working.</p>