title: tic-tac-toe logic and syntax using reactjs
body: <p>I'm new to react.js and I started trying to create a simple Tic-Tac Toe app, but I'm having an issue with my logic.</p>
  
  <p>When I console.log the current turn I have the correct "X" or "O" character tile. However, when I console.log it inside the render() function I get the opposite character tile (i.e. if the winner is "X" then the winner renders on the template as "O"). </p>
  
  <p>I tried swapping the value of current value inside the render() function, but it's giving me an error. Any ideas on what I'm doing wrong here?</p>
  
  <p>Link to my github repo is here, or the check out the code is below.
  <a href="https://github.com/jchan922/tic-react-toe/blob/master/src/App.js" rel="nofollow noreferrer">https://github.com/jchan922/tic-react-toe/blob/master/src/App.js</a></p>
  
  <p>Thanks!</p>
  
  <p><strong>EDIT:</strong> </p>
  
  <ul>
  <li><p><em>CodePen</em></p>
  
  <p>-- <a href="http://codepen.io/jchan922/pen/LxKEwm?editors=0010" rel="nofollow noreferrer">http://codepen.io/jchan922/pen/LxKEwm?editors=0010</a></p></li>
  <li><p><em>Question clarification</em></p>
  
  <p>-- even though my logic is console logging everywhere else correctly, if the winner is "X" then the winner renders on the view as "O" and vice versa. I can't get my template to render the correct "X" or "O" player.</p></li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/6IFET.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6IFET.png" alt="enter image description here"></a></p>
  
  <pre><code>class App extends Component {
      // Component Initialization
      constructor(props){
          super(props)
          this.state = {
              player_one: "X",
              player_two: "O",
              currentTurn: "X",
              board: [
                  "", "", "", "", "", "", "", "", ""
              ],
              winner: null,
              moveCount: 0
          }
      }
  
      handleClick(index){
          if(this.state.board[index] === "" &amp;&amp; !this.state.winner) {
              var currentBoard = this.state.board,
                  count = this.state.moveCount;
  
              currentBoard[index] = this.state.currentTurn;
              count += 1;
  
              this.setState({
                  board: this.state.board,
                  winner: this.checkForWinner(),
                  currentTurn: this.state.currentTurn === this.state.player_one ? this.state.player_two : this.state.player_one,
                  moveCount: count
              });
  
          }
      }
  
      handleReset(){
          console.log("RESET")
          this.setState({
              player_one: "X",
              player_two: "O",
              currentTurn: "X",
              board: [
                  "", "", "", "", "", "", "", "", ""
              ],
              winner: null,
              moveCount: 0
          })
      }
  
      checkForWinner(moveCount) {
          var currentTurn = this.state.currentTurn;
          var symbols = this.state.board;
          var winningCombos = [[0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6]];
  
          return winningCombos.find(function(combo) {
              if(symbols[combo[0]] !== "" &amp;&amp; symbols[combo[1]] !== ""  &amp;&amp; symbols[combo[2]] !== ""  &amp;&amp; symbols[combo[0]] === symbols[combo[1]] &amp;&amp; symbols[combo[1]] === symbols[combo[2]]) {
                  console.log("Found a winner", currentTurn, [combo[0],combo[1],combo[2]]);
                  return currentTurn;
              }
              else {
                  return null;
              }
  
          })
      }
  
      // Component Render
      render() {
          console.log(this.state.currentTurn);
          return (
              &lt;div className="app-container"&gt;
                  {this.state.winner ? &lt;h2&gt;{`The winner is ${this.state.currentTurn}`}&lt;/h2&gt; : null}
                  &lt;div className="board"&gt;
                      {this.state.board.map((cell, index) =&gt; {
                          return &lt;div onClick={() =&gt; this.handleClick(index)} key={index} className="square"&gt;&lt;p className="playerSymbol"&gt;{cell}&lt;/p&gt;&lt;/div&gt;
                      })}
                  &lt;/div&gt;
                  &lt;div className="reset"&gt;
                      &lt;button onClick={() =&gt; this.handleReset()} className="resetButton"&gt;RESET&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  export default App;
  </code></pre>