Build a Sudoku board with validation

Question

Accepted Answer

## Building a Sudoku Board with Validation in React

**Mental model:** A 9×9 grid of digit strings plus a `given` mask (which cells are fixed). Editing a non-given cell accepts only 1–9. Validation is *derived*: scan every row, column, and 3×3 box for duplicate digits and collect the conflicting cell keys. Cells in that set render red.

### Step 1 — Board + given mask
```jsx
const [board, setBoard] = useState(PUZZLE.map((r) => [...r]));
const given = PUZZLE.map((r) => r.map((v) => v !== ''));
```

### Step 2 — Edit only non-given, digits only
```jsx
const set = (r, c, v) => {
  if (given[r][c]) return;
  if (v !== '' && !/^[1-9]$/.test(v)) return;
  setBoard((b) => b.map((row, i) => row.map((cell, j) => (i === r && j === c ? v : cell))));
};
```

### Step 3 — Derive conflicts
For each group (9 rows, 9 cols, 9 boxes), any digit appearing twice marks all its cells.

```jsx
const conflicts = useMemo(() => findConflicts(board), [board]);
// findConflicts groups cell coords by digit within

Build a Sudoku board with validation

Understand the problem

Attempt it yourself

Stuck? AI Nudge Available

Study the solution

The solution is waiting

React solution

Join the discussion

Discussion (0)