Build a Todo List

Question

Build a Todo List

Accepted Answer

## Building a Todo List in React

**Mental model:** A todo list is CRUD over an array of `{ id, text, done }`. Keep the list and the current filter in state; derive the *visible* todos and the active count rather than storing them. Each mutation returns a new array so React re-renders predictably.

### Step 1 — Model items with stable ids
Use a unique id (not the array index) so toggling/removing stays correct after reorders.

```jsx
const [todos, setTodos] = useState([]);
const add = (text) => setTodos((t) => [...t, { id: crypto.randomUUID(), text, done: false }]);
```

### Step 2 — Toggle and delete immutably
Map to flip `done`; filter to remove.

```jsx
const toggle = (id) => setTodos((t) => t.map((x) => x.id === id ? { ...x, done: !x.done } : x));
const remove = (id) => setTodos((t) => t.filter((x) => x.id !== id));
```

### Step 3 — Derive the filtered view
Compute visible todos from `todos` + `filter` during render — no extra state to keep in sync.

```jsx
const visible = todos.f

Build a Todo List

Understand the problem

Attempt it yourself

Stuck? AI Nudge Available

Study the solution

The solution is waiting

React solution

Join the discussion

Discussion (0)