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` to its position. When a new book was prepended, React matched by position, reused instances in place, and their `starred` state slid one slot down. Using `key={book.id}` lets React track each row by item identity - on prepend React mounts a fresh unstarred row for the new book and leaves every existing `BookRow` with its state intact.