A task manager renders a list of tasks, each with its own note input. Tasks can be removed one at a time. Each note should stay with the task it was written for.
Type a note into the first task and then delete that task. The note reappears inside the row that was originally the second task.
When items are removed from a list, React needs a stable way to know which component instance belongs to which item.
When items are removed from a list, React needs a stable way to know which component instance belongs to which item.
Why this fixes it
React uses the key prop to match component instances between renders. With key={index}, a TaskRow at position 0 owns the state that belongs to "the first slot," not to any specific task. When Research is deleted and the array shortens, Design moves to index 0 - but React reuses the TaskRow instance that was already at key 0, complete with its note state, while only updating the label prop to "Design." Using key={task.id} ties each instance to a stable task identity so when Research is deleted, React correctly unmounts only the Research instance and leaves the Design and Build instances along with their note state entirely untouched.