{this.renderSquare(0)}
{this.renderSquare(1)}
{this.renderSquare(2)}
{this.renderSquare(3)}
{this.renderSquare(4)}
{this.renderSquare(5)}
{this.renderSquare(6)}
{this.renderSquare(7)}
{this.renderSquare(8)}
);
}
}
class Game extends React.Component {
constructor(props) {
super(props);
this.state = {
history: [{
squares: Array(9).fill(null),
}],
xIsNext: true,
currentMoveIndex: 0,
}
}
playTurn(i) {
const history = this.state.history.slice(0, this.state.currentMoveIndex + 1);
const currentState = history[history.length - 1];
if (currentState.squares[i] || calculateWinner(currentState.squares)) {
return;
}
const newSquares = [...currentState.squares];
newSquares[i] = this.state.xIsNext ? 'X' : 'O';
this.setState({
history: [...history, {
squares: newSquares,
}],
xIsNext: !this.state.xIsNext,
currentMoveIndex: history.length,
});
}
jumpTo(moveIndex) {
this.setState({
currentMoveIndex: moveIndex,
xIsNext: moveIndex % 2 === 0,
});
}
render() {
const history = this.state.history;
const currentState = history[this.state.currentMoveIndex];
let status;
const winner = calculateWinner(currentState.squares);
if (winner) {
status = `Winner: ${winner}`;
} else {
const nextPlayer = this.state.xIsNext ? 'X' : 'O';
status = `Next player ${nextPlayer}`;
}
const moves = history.map((state, index) => {
const description = index === 0 ?
'Go to game start' :
`Go to move #${index}`;
return (