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.