Description

A note editor uses useReducer. Adding a note appends it to the list. Editing a note should update just that note's text. Editing always adds a duplicate instead of updating in place.

Anomaly

Click Edit on a note, change the text, click Save. The original note stays and a second copy with the new text appears below it. The list grows instead of updating.

Constraint
Do not change the ADD case or the component JSX
Hint
Consult the SenseiOnly for those truly stuck · Flip to reveal

The ADD case works fine — how is the EDIT case treating the notes array differently than it should?

Loading editor…
Correct Solution
Loading...

Why this fixes it

The `EDIT` case used `[...state.notes, { id: action.id, text: action.text }]`, which appended a new object to the array instead of replacing the existing one — the note with the matching `id` was never removed, so every save produced a duplicate entry below the original. Replacing that line with `state.notes.map(n => n.id === action.id ? { ...n, text: action.text } : n)` iterates the existing array and returns a new object only for the item whose `id` matches, leaving all other items untouched. The array length stays the same because `map` always produces a one-to-one replacement, and the spread `{ ...n, text: action.text }` ensures the updated item is a new object reference so React detects the change.

Expected OutputGoal State
Your OutputLive