Deviopath › React

Tic-Tac-Toe

Hard · Games

Build a two-player tic-tac-toe game.

Render a <p className="status">, a <div className="board"> with 9 <button className="cell"> elements (indexes 0-8, row by row) and a "Restart" button. Empty cells have no text.

Rules:

- X always starts. The status shows "Next player: X" or "Next player: O".

- Clicking an empty cell puts the current mark in it. Clicking a filled cell does nothing.

- When a player gets three in a row (row, column or diagonal) the status shows "Winner: X" (or O) and further clicks do nothing.

- When all 9 cells are filled without a winner, the status shows "Draw". A win on the last move is still a win.

- "Restart" empties the board and shows "Next player: X" again.

Next: Debounced Search