title: Computer move to always random empty cell in tic tac toe game React.js?
body: <p>I'm trying to make tic tac toe in Javascript and I'm stuck at computer moves.</p>
  
  <p>My game board is an empty array which I fill like this <code>board: new Array(9).fill("")</code> </p>
  
  <p>Then for takin turns I making this </p>
  
  <p><code>board: state.board.map((item, index) =&gt; index === action.index ? item = action.player : item)</code></p>
  
  <p>So I'm mapping over board and checking if <code>index</code> of cell is equal to passed <code>index</code>. If it is I'm replacing empty space with <code>'X'</code> or <code>'O'</code> and if it is not it stays an empty cell.</p>
  
  <p>My players turn function looks like this</p>
  
  <pre><code>userTurn (index) {
      if(this.props.gameFinished) {return}
      if(this.props.board[index] === '') {
          this.props.takeTurn(index, this.props.player);
          this.computerTurn();
      }
  }
  </code></pre>
  
  <p>And my computer turn </p>
  
  <pre><code>computerTurn() {
       const randomNumber =  Math.floor(Math.random() * 10);
  
       if(this.props.board[randomNumber] === '') {
          this.props.takeTurn(randomNumber, this.props.computer);
        }
      }
  </code></pre>
  
  <p>In my computer turn function I'm not sure what to do when <code>this.props.board[randomNumber]</code> is  not empty string. Because if it is not empty right now nothing happens and computer doesn't place it's symbol on board.</p>
  
  <p>So far I tried to add else statement like so </p>
  
  <pre><code>if(this.props.board[randomNumber] === '') {
              this.props.takeTurn(randomNumber, this.props.computer);
          } else {
              this.computerTurn();
          }
  </code></pre>
  
  <p>But sometimes it results in computer move placed on not empty cell somehow.</p>
  
  <p>So the question is what is the way to place computer move on the game board?</p>