title: Tic Tac Toe React Js : Not able to print location
body: <p>I am following Tic tac toe tutorial from <a href="https://reactjs.org/tutorial/tutorial.html" rel="nofollow noreferrer">https://reactjs.org/tutorial/tutorial.html</a></p>
  
  <p>I want to print location of cell being clicked</p>
  
  <p><a href="https://i.stack.imgur.com/1XIt1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1XIt1.png" alt="enter image description here"></a></p>
  
  <p>My Code : </p>
  
  <pre><code>function Square(props) {
    return (
      &lt;button className="square" onClick={props.onClick}&gt;
        {props.value}
      &lt;/button&gt;
    );
  }
  
  class Board extends React.Component {
    renderSquare(i) {
      return (
        &lt;Square
          value={this.props.squares[i]}
          onClick={() =&gt; this.props.onClick(i)}
        /&gt;
      );
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;div className="board-row"&gt;
            {this.renderSquare(0)}
            {this.renderSquare(1)}
            {this.renderSquare(2)}
          &lt;/div&gt;
          &lt;div className="board-row"&gt;
            {this.renderSquare(3)}
            {this.renderSquare(4)}
            {this.renderSquare(5)}
          &lt;/div&gt;
          &lt;div className="board-row"&gt;
            {this.renderSquare(6)}
            {this.renderSquare(7)}
            {this.renderSquare(8)}
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  class Game extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        history: [
          {
            squares: Array(9).fill(null), location : 0 
            // Here I have introduced location to hold index
          }
        ],
        stepNumber: 0,
        xIsNext: true
      };
    }
  
    handleClick(i) {
      const history = this.state.history.slice(0, this.state.stepNumber + 1);
      const current = history[history.length - 1];
      const squares = current.squares.slice();
      if (calculateWinner(squares) || squares[i]) {
        return;
      }
      squares[i] = this.state.xIsNext ? "X" : "O";
      this.setState({
        history: history.concat([
          {
            squares: squares, location : i  // Assigning Index
          }
        ]),
        stepNumber: history.length,
        xIsNext: !this.state.xIsNext
      });
    }
  
    jumpTo(step) {
      this.setState({
        stepNumber: step,
        xIsNext: (step % 2) === 0
      });
    }
  
    render() {
      const history = this.state.history;
      const current = history[this.state.stepNumber];
      const winner = calculateWinner(current.squares);
      console.log("Hi : " + history[this.state.stepNumber].location + ", " + this.state.stepNumber) // Console logs print correct location value
      const moves = history.map((step, move) =&gt; {
         var desc = move ?
          'Go to move #' + move :
          'Go to game start';
        desc = desc + " : " + history[this.state.stepNumber].location;
        return (
          &lt;li key={move}&gt;
            &lt;button onClick={() =&gt; this.jumpTo(move)}&gt;{desc}&lt;/button&gt;
          &lt;/li&gt;
        );
      });
  
     // This display of Index is getting updated with each clicks
  
      let status;
      if (winner) {
        status = "Winner: " + winner;
      } else {
        status = "Next player: " + (this.state.xIsNext ? "X" : "O");
      }
  
      return (
        &lt;div className="game"&gt;
          &lt;div className="game-board"&gt;
            &lt;Board
              squares={current.squares}
              onClick={i =&gt; this.handleClick(i)}
            /&gt;
          &lt;/div&gt;
          &lt;div className="game-info"&gt;
            &lt;div&gt;{status}&lt;/div&gt;
            &lt;ol&gt;{moves}&lt;/ol&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  // ========================================
  
  ReactDOM.render(&lt;Game /&gt;, document.getElementById("root"));
  
  function calculateWinner(squares) {
    const lines = [
      [0, 1, 2],
      [3, 4, 5],
      [6, 7, 8],
      [0, 3, 6],
      [1, 4, 7],
      [2, 5, 8],
      [0, 4, 8],
      [2, 4, 6]
    ];
    for (let i = 0; i &lt; lines.length; i++) {
      const [a, b, c] = lines[i];
      if (squares[a] &amp;&amp; squares[a] === squares[b] &amp;&amp; squares[a] === squares[c]) {
        return squares[a];
      }
    }
    return null;
  }
  </code></pre>
  
  <p>Output : </p>
  
  <p>The location is getting updated with latest value in all list items like below screens : </p>
  
  <p><a href="https://i.stack.imgur.com/vzcgY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vzcgY.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/AHPEn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AHPEn.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/hPlBp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hPlBp.png" alt="enter image description here"></a></p>
  
  <p>I want to print Index </p>
  
  <blockquote>
    <p>Go To Move #X : [ Index of cell ] </p>
  </blockquote>
  
  <p>Index is getting updated for each list item with latest value. </p>
  
  <p>Note : All cells index starting from 0 to 8.</p>