reactjs sets wrong values in state

Question

I am very new to react and tried my luck on this official tutorial: https://reactjs.org/tutorial/tutorial.html. I got it working. Now I'm in the process of experimenting with it and tried to generate the tic tac toe field with two loops.

When I click on a single field the values in all three fields in the column are set (only the one I clicked on should be set) and the initial history entry in the state (state.history[0].squares with all fields 'null') is overwritten, which shouldn't happen.

function Square(props) {
    return (
        <button className="square" onClick={props.onClick}>
           {props.value}
        </button>
    );
}

function Board(props) {
    const rows = [];
    for(let i=0; i<3; i++) {
        const cols = [];
        for(let j=0; j<3; j++) {
            cols.push(
                <Square
                    key={i + "_" + j}
                    value={props.squares[i][j]}
                    onClick={() => props.onClick(i, j)}
                />
            );
        }
        rows.push(
            <div key={i} className="board-row">
                {cols}
            </div>
        );
    }
    return (<div>{rows}</div>);
}

class Game extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            history: [{
                squares: Array(3).fill(Array(3).fill(null)),
                field: '/'
            }],
            stepNumber: 0,
            xIsNext: true,
        };
    }

    handleClick(i, j) {
        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][j]) {
            return;
        }
        squares[i][j] = this.getNexPlayer();
        this.setState({
            history: history.concat([{
                squares: squares,
                field: '(' + (j+1) + ',' + (i+1) + ')',
            }]),
            stepNumber: history.length,
            xIsNext: !this.state.xIsNext,
        });
    }

    jumpTo(step) {
        console.log(this.state);
        this.setState({
            stepNumber: step,
            xIsNext: (step % 2) === 0,
        });
    }

    getNexPlayer() {
        return this.state.xIsNext ? 'X' : 'O';
    }

    render() {
        const history = this.state.history;
        const moves = history.map((step, move) => {
            const desc = move ? 'Go to move #' + move + ' ' + step.field : 'Go to game start';
            return (
                <li key={move}>
                    <button
                        className={this.state.stepNumber === move ? 'bold' : ''}
                        onClick={() => this.jumpTo(move)}
                    >
                        {desc}
                    </button>
                </li>
            );
        });
        const current = history[this.state.stepNumber];
        let status = 'Next player: ' + this.getNexPlayer();
        const winner = calculateWinner(current.squares);
        if(winner) {
            status = 'Winner: ' + winner;
        } else if(history.length === 10) {
            status = 'DRAW';
        }

        return (
            <div className="game">
                <div className="game-board">
                    <Board
                        squares={current.squares}
                        onClick={(i, j) => this.handleClick(i, j)}
                    />
                </div>
                <div className="game-info">
                    <div>{status}</div>
                    <ol>{moves}</ol>
                </div>
            </div>
        );
    }
}

// ========================================

ReactDOM.render(
    <Game />,
    document.getElementById('root')
);

function calculateWinner(squares) {
    const solutions = [
        [[0,0], [0,1], [0,2]],
        [[1,0], [1,1], [1,3]],
        [[2,0], [2,1], [2,3]],
        [[0,0], [1,0], [2,0]],
        [[0,1], [1,1], [2,1]],
        [[0,2], [1,2], [2,2]],
        [[0,0], [1,1], [2,2]],
        [[2,0], [1,1], [0,2]],
    ];
    for(let i = 0; i < solutions.length; i++) {
        const [a, b, c] = solutions[i];
        if(squares[a[0]][a[1]] && squares[a[0]][a[1]] === squares[b[0]][b[1]] && squares[a[0]][a[1]] === squares[c[0]][c[1]]) {
            return squares[a[0]][a[1]];
        }
    }
    return null;
}

The Idea is to build a tic tac toe game that saves all moves in a history and you can switch between the moves in the history.

What am I missing?
Thank you

Answer 1

Arrays are mutable, so the 3 references to 1 array all point to the same array - the code squares: Array(3).fill(Array(3).fill(null)) from the question is similar to:

const a = [null, null, null]
const b = [a, a, a]
b[0][0] = 1
console.log(a) // [1, null, null]

you might be better off with explicit 2D array like [[0,0,0], [0,0,0], [0,0,0]]