A key that is an array index breaks reordering

A key tells React which element is which between renders, and an index says only “the third one”, which is a different element after a sort.

// the input's typed value follows the position,
// not the item — so sorting the list moves the text
{rows.map((row, i) => <Row key={i} row={row} />)}

{rows.map(row => <Row key={row.id} row={row} />)}

// and when there genuinely is no id, a stable synthetic
// one assigned at creation is better than the index

The bug only appears when the list is reordered, filtered or has an item removed from the middle, which is why it survives review and appears later as uncontrolled input state attaching to the wrong row. An index key is correct for a list that is append-only and never reordered, which is rarer than the number of places it is used. The React key warning does not distinguish, because an index is a valid key.