Remove element from array using react

Question

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.

    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 <Selection value={this.state.box[i]} onClick={() => this.handleClick(i)} />
    }

    render() {

        const winner = calculateWinner(this.state.box);
        let status;
        if (winner) {
            status = 'Winner: ' + winner;
        } else if (winner && winner === 'Draw') {
            status = winner;
        }
        else {
            status = 'Next Player: ' + (this.state.isNext ? 'X' : 'O');
        }

        return (
            <div>
                <div className="status">{status}</div>
                <div className="board-row">
                    {this.renderSquare(0)}
                    {this.renderSquare(1)}
                    {this.renderSquare(2)}
                </div>
                <div className="board-row">
                    {this.renderSquare(3)}
                    {this.renderSquare(4)}
                    {this.renderSquare(5)}
                </div>
                <div className="board-row">
                    {this.renderSquare(6)}
                    {this.renderSquare(7)}
                    {this.renderSquare(8)}
                </div>
            </div>
        );
    }
}

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 < lines.length; i++) {
        const [a, b, c] = lines[i];
        if (box[a] && box[a] === box[b] && box[a] === box[c]) {
            return box[a];
        }
        else if (!box.includes('')) {
            return 'Draw';
        }
    }
    return null;
}

export default GameBoard;

Dacre Denny · Accepted Answer · 2018-08-21 22:24:12Z

1

You could use the index i to update the corresponding item value in array of boxes to achieve this:

handleClick(i) {
  debugger
  const box = this.state.box.slice();

  if (box[i].includes('X') || box[i].includes('O')) {

      box[i] = '' // Reset the value of box item at i in box array
      this.setState({ box: box, isNext: !this.state.isNext }); // Trigger re-render

  } else if (box[i].includes('')) {
      box[i] = this.state.isNext ? 'X' : 'O';
      this.setState({ box: box, isNext: !this.state.isNext });
  }
}

answered Aug 21, 2018 at 22:24

Dacre Denny

30.4k5 gold badges53 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Remove element from array using react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related