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

What this error means

This warning is React's way of telling you that when rendering an array of elements, each element needs a unique identifier called a "key" prop. Keys are essential for React's reconciliation algorithm, which determines how to efficiently update the DOM when your component re-renders. When React re-renders a list, it compares the new list with the previous one to figure out what changed. Without keys, React relies on the position of elements in the array to track them. This can lead to serious bugs: if items get reordered, React might think an element just changed its content when it actually moved positions, causing internal state, focus, or form values to be applied to the wrong elements. Keys act as stable identifiers that persist across renders, allowing React to accurately track which specific element is which, regardless of position changes. This ensures that component state, DOM state (like focus or scroll position), and side effects remain correctly associated with their intended elements.

Typical symptoms

• Yellow warning message appears in browser console during development
• Warning specifically mentions "Each child in a list should have a unique key prop"
• Console shows the file and line number where the problematic list is being rendered
• Component state or focus may be incorrectly applied when list items reorder
• Form inputs in list items may retain values when items swap positions
• Animations or transitions on list items behave unexpectedly during reordering
• Warning appears whenever the parent component containing the list re-renders

Common causes

1. Mapping over an array with .map() without providing a key prop to each returned element
2. Using array index as the key value when the list order can change or items can be added/removed
3. Rendering list items inside a fragment without keys when multiple elements are returned
4. Spreading props that contain a key without explicitly passing it to the JSX element
5. Returning multiple elements from a component used in a list without wrapping them with a keyed container
6. Conditionally rendering elements within a loop without consistent key assignment
7. Using non-unique values as keys (like duplicate IDs or repeated strings)
8. Generating new random keys on each render instead of using stable identifiers

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

// Example of code causing the warning:
function UserList({ users }) {
  return (
    <ul>
      {users.map(user => (
        <li>{user.name}</li>  // Missing key prop here
      ))}
    </ul>
  );
}

// Fixed with database ID:
function UserList({ users }) {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

import { v4 as uuidv4 } from 'uuid';

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

function ItemList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.text}</li>
      ))}
    </ul>
  );
}

// Only use index for completely static lists:
function StaticMenu() {
  const menuItems = ['Home', 'About', 'Contact']; // Never changes
  
  return (
    <nav>
      {menuItems.map((item, index) => (
        <a key={index} href={`/${item.toLowerCase()}`}>
          {item}
        </a>
      ))}
    </nav>
  );
}

import { Fragment } from 'react';

function DefinitionList({ terms }) {
  return (
    <dl>
      {terms.map(term => (
        <Fragment key={term.id}>
          <dt>{term.word}</dt>
          <dd>{term.definition}</dd>
        </Fragment>
      ))}
    </dl>
  );
}

// Or use the shorthand syntax:
function DefinitionList({ terms }) {
  return (
    <dl>
      {terms.map(term => (
        <React.Fragment key={term.id}>
          <dt>{term.word}</dt>
          <dd>{term.definition}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

// Bad: Non-unique keys
function CategoryList({ items }) {
  return items.map(item => (
    <div key={item.category}> {/* Multiple items may share category */}
      {item.name}
    </div>
  ));
}

// Good: Unique composite key or unique ID
function CategoryList({ items }) {
  return items.map(item => (
    <div key={`${item.category}-${item.id}`}>
      {item.name}
    </div>
  ));
}

Advanced notes

Frequently asked questions

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

This warning is React's way of telling you that when rendering an array of elements, each element needs a unique identifier called a "key" prop. Keys are essential for React's reconciliation algorithm, which determines how to efficiently update the DOM when your component re-renders. When React re-renders a list, it compares the new list with the previous one to figure out what changed.

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

This React warning appears when rendering arrays or lists without assigning unique key props to each element. Keys help React identify which items have changed, been added, or removed, enabling efficient re-rendering and preventing UI bugs.

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

Mapping over an array with .map() without providing a key prop to each returned element Using array index as the key value when the list order can change or items can be added/removed Rendering list items inside a fragment without keys when multiple elements are returned

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

It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Related errors

• ReferenceError: module is not defined

  How to fix "ReferenceError: module is not defined" in React

  MEDIUM

• Warning: Each child in a list should have a unique "key" prop.

  Missing "key" prop for element in array

  MEDIUM

• Module not found: Can't resolve 'react'

  How to fix "Module not found: Can't resolve 'react'" in React

  HIGH

• Component definition is missing display name

  How to fix "Component definition is missing display name" in React

  LOW

• 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)
• 💬
  Sentry: Each Child in a List Should Have a Unique Key Prop(Stack Overflow)
• 🐙
  GitHub: Unable to eliminate key prop warning(GitHub)
• 📝
  Epic React: Why React needs a key prop