The warning about missing keys makes them look like a lint requirement to be silenced with the array index. A key tells React which element in the new list is the same element as one in the old list, and the index is a claim that position is identity.
// wrong: reorder or remove, and state attaches to the wrong row
{rows.map((row, i) => <Row key={i} data={row} />)}
// right: whatever makes this row this row
{rows.map(row => <Row key={row.id} data={row} />)}With an index key, deleting the first of five rows makes React reuse the first component for what used to be the second — so a half-typed input, a focus ring or a running animation stays attached to the wrong data. It is invisible in a static list and obvious the moment anything is inserted, removed or sorted. An index is only acceptable when the list never changes order or length.