title: Tic tac toe react state not updating
body: <p>I am learning react and i am trying to build the tic tac toe game using the documentation, however using functional components on my own.</p>
  <p>This is what I have done till now</p>
  <p>app.js</p>
  <pre><code>function App() {
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;Game /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>Game.js</p>
  <pre><code>
  const styles = {
    width: &quot;200 px&quot;,
    margin: &quot;20px auto&quot;,
  };
  
  function Game() {
    const [board, setBoard] = useState(Array(9).fill(&quot;&quot;));
    const [xIsNext, setXIsNext] = useState(true);
    const winner = calculateWinner(board);
  
    const handleClick = (i) =&gt; {
      const boardCopy = [...board];
      if (winner || boardCopy[i]) return;
  
      boardCopy[i] = xIsNext ? &quot;X&quot; : &quot;O&quot;;
      setBoard(boardCopy);
      setXIsNext(!xIsNext);
    };
  
    function renderMoves() {
      return &lt;button onClick={() =&gt; Array(9).fill(null)}&gt; Start Game&lt;/button&gt;;
    }
    return (
      &lt;&gt;
        &lt;Board onClick={handleClick} squares={board} /&gt;
        &lt;div style={styles}&gt;
          &lt;p&gt;
            {winner ? &quot;Winner &quot; + winner : &quot;Next player&quot; + (xIsNext ? &quot;X&quot; : &quot;O&quot;)}
            {renderMoves()}
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/&gt;
    );
  }
  </code></pre>
  <p>Board.js</p>
  <pre><code>
  function Board({ onClick, squares }) {
    const style = {
      border: &quot;4px solid darkblue&quot;,
      borderRadius: &quot;10px&quot;,
      width: &quot;250px&quot;,
      height: &quot;250px&quot;,
      margin: &quot;0 auto&quot;,
      display: &quot;grid&quot;,
      gridTemplate: &quot;repeat(3, 1fr) / repeat(3, 1fr)&quot;,
    };
  
    return (
      &lt;div style={style}&gt;
        {squares.map(
          (square, i) =&gt; (
            console.log(square),
            (
              &lt;Square
                key={i}
                value={square}
                onClick={() =&gt; onClick(&quot;dummy value&quot;)}
              /&gt;
            )
          )
        )}
      &lt;/div&gt;
    );
  }
  
  </code></pre>
  <p>Button.js</p>
  <pre><code>function Square({ value, onClick }) {
    return (
      &lt;button style={style} onClick={onClick}&gt;
        {value}
      &lt;/button&gt;
    );
  }
  </code></pre>
  <p>At this point in the code the game is functional and user should be able to play the game.</p>
  <p>However, in my current code, when you click on Square nothing appears.</p>
  <p>I checked in <code>Game.js</code>, the logic for <code>handleClick()</code> is same as the online documentation. These lines handle the logic for showing &quot;X&quot; and &quot;O&quot;</p>
  <pre><code>const boardCopy = [...board];
  if (winner || boardCopy[i]) return;
  
  boardCopy[i] = xIsNext ? &quot;X&quot; : &quot;O&quot;;
  setBoard(boardCopy);
  setXIsNext(!xIsNext);
  </code></pre>
  <p>it creates a shallow copy of the original board and updates the original board state with the new one.</p>
  <p>in Board.js, I put a <code>console.log(square)</code> to see what is being passed here, this shows <code>NULL</code>.</p>
  <p>After the state is updated the console.log() show say X or O right?</p>
  <p>What am I doing wrong here?</p>
  <p>PS - I also one side question,</p>
  <p>1)since I am new to this what is the difference of use between writing functions like below, both work perfectly so which should be used when?</p>
  <pre><code>function test({i}){
  }
  </code></pre>
  <p>and</p>
  <pre><code>const test = (i) =&gt;
  {
  }
  </code></pre>