A task list lets users click a row to mark it as selected. Each row tracks its own selected state. Clicking the Add Task button prepends a new task at the top.
Click any row to select it - it shows a label change to confirm selection. Then click Add Task. The selection label jumps off the row you selected and onto the row below it. The selection moved to a different task.
React needs to match component instances between renders - what does it use to do that?
React needs to match component instances between renders - what does it use to do that?
Why this fixes it
key={index} tied each TaskRow instance's identity to its array position. When a new task was prepended at index 0, React matched components by position, saw the same keys, reused the existing instances in place, and their selected state slid one position down - the selection text appeared on the wrong row. Giving each task a stable unique id and using key={task.id} lets React track rows by item identity. On prepend React mounts a fresh unselected row for the new task and leaves every existing TaskRow exactly where it was, preserving selection correctly.