When is using an array index as a React key a problem?

Direct answer

An array index is a poor key when items can be inserted, deleted, filtered, or reordered because the same index can become associated with different data.

List behavior	Index key risk
Static list that never changes order	Often low
Insert or delete items	Component identity can shift
Sort or reorder items	State may follow the position instead of the item
Editable rows	User input can appear attached to the wrong row

Prefer a stable ID from the data. Generating keys with Math.random() during render is even worse because every render creates new identities.