How to fix Warning: Each child in a list should have a unique "key" prop. in React

What this error means

This warning appears when you're rendering a list of React components or elements without providing the required key prop. React displays this warning in development mode whenever you use Array.map(), Array.filter(), or similar methods to render multiple elements without assigning a unique key to each one. The key prop is a special attribute that React uses internally to track each element's identity across renders. When React re-renders a list, it uses these keys to determine which items have changed, which are new, and which have been removed. Without keys, React can't efficiently update the DOM and may end up unnecessarily re-rendering all items, even if only one changed. This affects both performance and can cause subtle bugs like incorrect UI updates, lost component state, or form inputs losing focus. While this is a warning and your app will still run, ignoring it can lead to unexpected behavior, especially in dynamic lists where items can be added, removed, or reordered. The warning indicates that React is falling back to using array indexes internally, which can cause problems when the list order changes.

Typical symptoms

• Console shows "Warning: Each child in a list should have a unique key prop" during development
• Components in a list lose their state when the list re-renders or items are reordered
• Form inputs within list items unexpectedly lose focus or reset their values
• Animations or transitions on list items behave incorrectly when items are added or removed
• Performance degradation with large lists as React unnecessarily re-renders all items
• List items display incorrect data after sorting or filtering operations
• ESLint warning "react/jsx-key" if using eslint-plugin-react

Common causes

1. Using Array.map() to render elements without adding a key prop to each element
2. Rendering fragments or React components in a loop without assigning keys
3. Placing the key prop on the wrong element (e.g., on a child div instead of the mapped component)
4. Using non-unique values as keys, such as the same string for multiple items
5. Using array indexes as keys when the list order can change (items can be added, removed, or reordered)
6. Generating keys dynamically during render with Math.random() or Date.now(), causing keys to change on every render
7. Spreading props that override the key prop with an invalid value
8. Rendering multiple elements from a map without wrapping them in a parent element that has the key

How to fix "Warning: Each child in a list should have a unique "key" prop."

// Missing key prop
items.map(item => <ListItem />)

// Or with fragments
items.map(item => <><div>...</div></>)

// Good: Using stable database IDs
const users = [
  { id: 'user-123', name: 'Alice' },
  { id: 'user-456', name: 'Bob' }
];

users.map(user => (
  <UserCard key={user.id} user={user} />
))

// Good: Using unique slugs or identifiers
products.map(product => (
  <ProductItem key={product.sku} product={product} />
))

// Acceptable only if list never changes
const staticItems = ['Home', 'About', 'Contact'];

staticItems.map((item, index) => (
  <NavLink key={index}>{item}</NavLink>
))

import { v4 as uuidv4 } from 'uuid';

// Good: Generate IDs when creating data
const [items, setItems] = useState([
  { id: uuidv4(), text: 'Item 1' },
  { id: uuidv4(), text: 'Item 2' }
]);

// When adding new items
const addItem = (text) => {
  setItems([...items, { id: uuidv4(), text }]);
};

// Render with stable IDs
items.map(item => (
  <ListItem key={item.id} item={item} />
))

let nextId = 0;

const [items, setItems] = useState([
  { id: nextId++, text: 'Item 1' },
  { id: nextId++, text: 'Item 2' }
]);

// Wrong: Key on wrong element
items.map(item => (
  <ListItem>
    <div key={item.id}>{item.name}</div>
  </ListItem>
))

// Wrong: Key inside the component
function ListItem({ item }) {
  return <li key={item.id}>{item.name}</li>; // Key should be on <ListItem />
}

// Correct: Key on the mapped element
items.map(item => (
  <ListItem key={item.id} item={item} />
))

function ListItem({ item }) {
  return <li>{item.name}</li>; // No key here
}

items.map(item => (
  <React.Fragment key={item.id}>
    <dt>{item.term}</dt>
    <dd>{item.definition}</dd>
  </React.Fragment>
))

// Correct: Keys unique within each list
<div>
  <ul>
    {fruits.map(fruit => <li key={fruit.id}>{fruit.name}</li>)}
  </ul>
  <ul>
    {vegetables.map(veg => <li key={veg.id}>{veg.name}</li>)}
  </ul>
</div>

// Problem: IDs might overlap between arrays
const allItems = [...userItems, ...adminItems];

// Solution: Prefix keys to ensure uniqueness
[
  ...userItems.map(item => <Item key={`user-${item.id}`} item={item} />),
  ...adminItems.map(item => <Item key={`admin-${item.id}`} item={item} />)
]

# Clear browser cache if needed
# Open DevTools Console (F12)
# Look for warnings in red text

Advanced notes

Frequently asked questions

What does "Warning: Each child in a list should have a unique "key" prop." mean?

This warning appears when you're rendering a list of React components or elements without providing the required key prop. filter(), or similar methods to render multiple elements without assigning a unique key to each one. The key prop is a special attribute that React uses internally to track each element's identity across renders.

How do I fix "Warning: Each child in a list should have a unique "key" prop."?

This React warning occurs when rendering an array of elements without providing a unique key prop for each item. Keys help React efficiently identify which items have changed, been added, or removed during re-renders.

What causes "Warning: Each child in a list should have a unique "key" prop."?

Using Array.map() to render elements without adding a key prop to each element Rendering fragments or React components in a loop without assigning keys Placing the key prop on the wrong element (e.g., on a child div instead of the mapped component)

Is the "Warning: Each child in a list should have a unique "key" prop." error serious?

Yes. This is a high-severity error that usually blocks work until it is fixed, but the steps above resolve it.

Related errors

• Keys should not be passed as JSX attributes

  How to fix "Keys should not be passed as JSX attributes" in React

  MEDIUM

• Warning: Prop `key` did not match

  How to fix "Prop key did not match" in React

  MEDIUM

• React.lazy: the factory function must be a function component

  React.lazy: the factory function must be a function component

  HIGH

• JSX transform failed

  How to fix "JSX transform failed" in React

  HIGH

• Failed to resolve import. Does the file exist?

  How to fix "Failed to resolve import" in React

  HIGH

• npm ERR! code ETIMEDOUT npm ERR! network request to https://registry.npmjs.org timed out

  npm registry request timed out

  MEDIUM

Official resources & further reading

• 📚React Official Documentation
• 📖
  React Official Docs: Rendering Lists(Official Docs)
• 📖
  React Legacy Docs: Lists and Keys(Official Docs)
• Kent C. Dodds: Understanding React's key prop
• Epic React: Why React needs a key prop
• Sentry: Warning - Each Child in a List Should Have a Unique key Prop
• Developer Way: React key attribute - best practices for performant lists