Training Grounds
Completing a Task Has No EffectBlack Belt
+50 Ki
Description

A todo list lets the user mark items as done, which should add a strikethrough to each completed item.

Anomaly

Click Complete on any todo item - nothing changes. The button responds but the item's status never updates on screen.

Constraint
Do not change the component JSX or the dispatch call
Hint

The reducer runs and returns - so why does React ignore it?

Consult the SenseiOnly for those truly stuck · Flip to reveal

The reducer runs and returns - so why does React ignore it?

Practice 26 related drills →
Loading editor…
Correct Solution
Loading...

Why this fixes it

The `TOGGLE` case wrote directly to `state.items[action.index].done` and then returned the same `state` reference - React compares the object returned by the reducer against the previous state using reference equality, and because it was the exact same object, React concluded nothing had changed and skipped the re-render entirely. Replacing that with an immutable update - `state.items.map(...)` wrapped in a new state object - produces a new reference at every level. React detects the reference change, schedules a re-render, and the button label and strikethrough style update correctly.

Expected OutputGoal State
Your OutputLive