title: Remove element from array using react
body: <p>My task is to build a tic tac toe game using react. One of the things that I need to implement is the ability to undo previous moves. I'm looking for some help with removing a single element from an array based on the selection. I have an if/else if statement that checks if the selected box has a value of X or O. If it does I need to delete that value from the board. </p>
  
  <pre><code>    class GameBoard extends Component {
  
      constructor(props) {
          super(props);
          this.state = {
              box: Array(9).fill(''),
              isNext: true
          };
      }
  
      handleClick(i) {
          debugger
          const box = this.state.box.slice();
  
          if (box[i].includes('X') || box[i].includes('O')) {
  
          } else if (box[i].includes('')) {
              box[i] = this.state.isNext ? 'X' : 'O';
              this.setState({ box: box, isNext: !this.state.isNext });
          }
      }
  
      renderSquare(i) {
          return &lt;Selection value={this.state.box[i]} onClick={() =&gt; this.handleClick(i)} /&gt;
      }
  
      render() {
  
          const winner = calculateWinner(this.state.box);
          let status;
          if (winner) {
              status = 'Winner: ' + winner;
          } else if (winner &amp;&amp; winner === 'Draw') {
              status = winner;
          }
          else {
              status = 'Next Player: ' + (this.state.isNext ? 'X' : 'O');
          }
  
          return (
              &lt;div&gt;
                  &lt;div className="status"&gt;{status}&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;
          );
      }
  }
  
  function calculateWinner(box) {
      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 (box[a] &amp;&amp; box[a] === box[b] &amp;&amp; box[a] === box[c]) {
              return box[a];
          }
          else if (!box.includes('')) {
              return 'Draw';
          }
      }
      return null;
  }
  
  export default GameBoard;
  </code></pre>