Build Tic-Tac-Toe

Question

Build Tic-Tac-Toe

Accepted Answer

## Building Tic-Tac-Toe in React

**Mental model:** The whole game is one array of 9 cells plus whose turn it is. Everything else — winner, draw, whether a cell is clickable — is *derived* from that board. Clicks are ignored if the cell is taken or the game is over.

### Step 1 — Board + turn
```jsx
const [board, setBoard] = useState(Array(9).fill(null));
const [xNext, setXNext] = useState(true);
```

### Step 2 — Derive the winner
Check the 8 winning lines against the current board.

```jsx
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]];
const winner = LINES.map(([a,b,c]) =>
  board[a] && board[a] === board[b] && board[a] === board[c] ? board[a] : null
).find(Boolean) || null;
```

### Step 3 — Handle a move (immutably)
Guard taken cells and finished games; copy the array.

```jsx
const play = (i) => {
  if (board[i] || winner) return;
  const next = board.slice();
  next[i] = xNext ? 'X' : 'O';
  setBoard(next); setXNext(!xNext);
};
```

### Step 4 —

Build Tic-Tac-Toe

Understand the problem

Attempt it yourself

Stuck? AI Nudge Available

Study the solution

The solution is waiting

React solution

Join the discussion

Discussion (0)