title: REACT connect 4 game - attempt to reset grid over setState but results in "undefined"
body: <p>I am trying to create a Connect of 4 game in React as an exercise.
  If i want to reset the grid or for displaying player points, a reset of my grid is required rather than simply reloading the entire page.
  In this case, dealing with my grid via state is a logical step, but after several attempts and variations, I'm unfortunately lost at the moment</p>
  <p>In this variation below, this.state.grid always returns undefined on reset (console.log right after render method begins).
  I see that the problem is most likely because in the gridHtml function I am already passing the grid to the state via setState.
  If I call this.gridHTML() directly on the reset button, my grid completely disappears.</p>
  <p>I am very grateful for any help at this point</p>
  <pre><code>    import React from 'react';
  
  
  
  class Grid extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              player: &quot;red&quot;,
              isGameOver: false,
              gamestarts: false
          };
          this.findLastEmptyColl = this.findLastEmptyColl.bind(this);
          this.onMouseEnter = this.onMouseEnter.bind(this);
          this.onMouseLeave = this.onMouseLeave.bind(this);
          this.onClick = this.onClick.bind(this);
          this.checkForWinner = this.checkForWinner.bind(this);
          this.gridHtml = this.gridHtml.bind(this);
          this.reset = this.reset.bind(this);
      };
  
  /*left out MouseEnter, leave, click and win logic , those work fine and to keep it short */
  
      gridHtml() {
          let rows = Array(6).fill(0), cols = Array(7).fill(0);
          let grid = rows.map((el, i) =&gt; {
              return (
                  &lt;div key={i} className=&quot;row&quot;&gt;
                      {cols.map((value, index) =&gt; {
                          return (
                                  &lt;div key={index} 
                                      onMouseEnter={this.onMouseEnter}
                                      onMouseLeave={this.onMouseLeave}
                                      onClick={this.onClick}
                                      className=&quot;col empty&quot; 
                                      data-col={index}
                                      data-row={i}&gt;
                                  &lt;/div&gt;
                              );
                      })}
                  &lt;/div&gt;
              );
          });
          
          this.setState({
              grid: grid
          });
  
      }
  
      
  
      componentDidMount() {
          this.gridHtml();
      }
      
      componentWillMount() {
          this.gridHtml();
      }    
      
      reset() {
          
          this.setState({
              grid: this.gridHtml(),
              isGameOver: false,
              gamestarts: false
          })
      }
  
      render() {
          console.log(this.state.grid);
          return (
              &lt;&gt;
                  {!this.state.gamestarts &amp;&amp; &lt;h4&gt;Connect 4 - Player {this.state.player} begins!&lt;/h4&gt;}
                  {this.state.gamestarts &amp;&amp; &lt;h4&gt;Player {this.state.player} &lt;/h4&gt;}
                  {(this.state.isGameOver &amp;&amp; !this.state.gamestarts) &amp;&amp; &lt;h4&gt;Player {this.state.player} has won&lt;/h4&gt;}
                  &lt;div id=&quot;board&quot;&gt;
                      {this.state.grid}
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;button style={{margin: &quot;30px&quot;}} onClick={() =&gt; {this.reset()}}&gt;Reset&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/&gt;
          )
      }
  }
  
  export default Grid;
  </code></pre>
  <h2>Update:</h2>
  <p>I see that my understanding of React doesn't seem to be properly adjusted yet; in my reset() function, due to the asynchronicity of react, I assume that the dynamic assignment via setState of my grid should actually render automatically?
  Again, the problem: when I currently press my reset button, the grid is re-created but the moves, red and yellow, are still on the grid as they were; last I thought of writing a function that instead of creating a new grid removes all CSS classes and data properties related to it - but that would make the whole point of doing something like this with React absurd.</p>
  <p>To make it even clearer:
  if I extend my reset() function with a setTimeout around setState, right after overwriting my grid, it works?! I can understand why but this right now feels like a hack and I don't want to leave it like this, because this is supposed to be the core competence of React? Hope it helps to understand better</p>
  <pre><code>reset () {
      this.setState({grid: 'some text ... loading '});
      setTimeout(() =&gt;{
          this.setState({
              grid: this.gridHtml(),
              isGameOver: false,
              gamestarts: true,
              player: &quot;red&quot;
          });
      }, 1000);
  }
  </code></pre>
  <p>Hope somebody can explain?
  Many thanks</p>