A reading list lets users star individual books. Each book row tracks its own starred state. A button at the top prepends a new book to the list.
Star the first book, then click Add Book. The star moves off the first book and onto the second. The tag followed the row position instead of the book it was applied to.
React uses the key prop to decide whether to update an existing component or replace it with a fresh one.
React uses the key prop to decide whether to update an existing component or replace it with a fresh one.
Why this fixes it
key={index} tied each BookRow instance's identity to its position in the array. When a new book was prepended, every existing component shifted one slot — React saw the same key at each position, reused the existing instances in place, and their starred state moved with them rather than with the book. Giving each book a stable unique id and using key={book.id} lets React track each row by the item it represents. On prepend, React sees a new key at position 0, mounts a fresh unstarred row for it, and leaves every existing row untouched.