react render_warning ai_generated true

Warning: Each child in a list should have a unique 'key' prop

ID: react/each-child-unique-key

Also available as: JSON · Markdown
95%Fix Rate
95%Confidence
50Evidence
2023-01-01First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
18 active — — —

Root Cause

Missing or non-unique key prop on list items. Causes incorrect re-renders.

generic

Workarounds

  1. 95% success Use a stable unique identifier from data (id, slug, etc.) 
    {items.map(item => <Item key={item.id} {...item} />)}

    Sources: https://react.dev/learn/rendering-lists#where-to-get-your-key

  2. 82% success If no ID exists, generate stable keys from content hash 
    // Generate IDs when creating data, not at render time:
const newItem = { id: crypto.randomUUID(), text: input };
setItems(prev => [...prev, newItem]);
// Then: items.map(item => <Li key={item.id}>{item.text}</Li>)

    Sources: https://react.dev/learn/rendering-lists#rules-of-keys

Dead Ends

Common approaches that don't work:

  1. Use array index as key 65% fail

    Causes bugs when list is reordered/filtered/sorted

  2. Use Math.random() as key 90% fail

    New key every render, destroys all component state

Error Chain

Frequently confused with: