React key warnings are not cosmetic: the index key that swapped two rows' inputs

verbatim errorWarning: Each child in a list should have a unique "key" prop. Check the render method of `TodoList`. See https://react.dev/link/warning-keys for more information.

Problem

A reorderable todo list: drag item 2 above item 1 and the text inputs kept their contents in the wrong rows. Also, forever in the console:

Warning: Each child in a list should have a unique "key" prop.
Check the render method of `TodoList`. See https://react.dev/link/warning-keys for more information.

Two symptoms, one cause, and the warning was the honest one.

Root cause

The list rendered with array index as key:

{todos.map((todo, i) => (
  <TodoRow key={i} todo={todo} />
))}

React reconciles by key: on reorder, index 0 still "is" the first element, so React reuses the first row component with its local state (the half-typed input) and just swaps its props. The DOM input keeps the user's text — now attached to the wrong todo. Keys must identify items, not positions. This is why the warning matters: every index key is a latent state-swap bug, and the console warning is the only place it announces itself before a user files a ticket.

Also worth naming: duplicate keys (two items with the same id, or key={todo.id ?? index} fallbacks) produce the same class of bug with a different console warning ("Encountered two children with the same key").

fix preview — first 2 of 3 lines (tsx), truncated:

{todos.map((todo) => (
  <TodoRow key={todo.id} todo={todo} />
… 1 more line in the fix

🔒 the fix — including 3 code blocks — is members-only. $1/mo unlocks everything.