React Key Prop Warning in Lists
Console warning: 'Each child in a list should have a unique key prop'. List re-renders cause wrong components to update. List items in wrong order after dynamic changes.
React uses keys to identify list items. Without unique keys, React reuses component instances incorrectly.
Error Messages You Might See
Common Causes
- No key prop on list items
- Using index as key (breaks when list reorders)
- Key not unique across siblings
- Key changes on re-render
- Using Math.random() for key generation
How to Fix It
Use unique, stable identifiers as keys:
// Bad - using index
{items.map((item, index) =>
{item.name}
)}
// Good - using unique ID
{items.map((item) =>
{item.name}
)}
// Good - using combination if no ID
{items.map((item) =>
{item.name}
)}Real developers can help you.
You don't need to be technical. Just describe what's wrong and a verified developer will handle the rest.
Get HelpFrequently Asked Questions
Why not use index as key?
Index changes when list reorders. React reuses wrong component instances. Only use index if list is static.
What makes a good key?
Unique, stable, not derived from other data. IDs from database are ideal. Avoid generating keys from data.