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

ReactBEGINNERMEDIUMUpdated Dec 11, 2025· 165 views

React warns with this message when you pass an array of JSX elements (for example via props.children or an items prop) to another component without giving each element a stable key. React uses the keys to match up elements across renders, so the warning signals that the list you handed off lacks identity.

Quick fix

Fixes Each child in a list passed to a component should have a unique "key" prop

const menuItems = products.map(product => (
  <Item>{product.name}</Item> // no key yet
));
return <Menu options={menuItems} />;
  1. Trace the warning to the component that receives the list
  2. Assign stable keys before handing the array to the component
  3. Preserve keys when the receiving component clones or filters children
  4. Verify the warning disappears and list behavior stabilizes
react — error
const menuItems = products.map(product => (
  <Item>{product.name}</Item> // no key yet
));
return <Menu options={menuItems} />;
Each child in a list passed to a component should have a unique "key" prop

What this error means

React builds its internal reconciliation tree when you hand a child component an array of nodes, so each element inside that array needs a key the moment you create it. The warning differs from "Each child in a list should have a unique key prop" only because the list is being passed to another component (via a prop or children) instead of being rendered in place. Even if the recipient component simply renders or clones `props.children`, the keys must already be set by the parent, otherwise React cannot tell which list item changed between renders. Use `React.Children.toArray` or inspect `child.key` if you need to replay the list, but the unique identifiers still belong on the elements themselves (for example a database `id`, slug, or other stable string).

Typical symptoms

  • Console reports "Warning: Each child in a list passed to a component should have a unique "key" prop" as soon as the component renders or receives new props.
  • Elements that live inside the passed list lose focus/state when the parent reorders, adds, or removes items.
  • A child component that accepts an `items` prop or `props.children` renders duplicated, missing, or shuffling content after an update because React reused DOM nodes.
  • React DevTools highlights the component that receives the list, even if the map call lives in the parent.
  • ESLint `react/jsx-key` also reports missing keys on the `.map` expression that builds the passed array.

Common causes

  1. Mapping data into JSX and passing the resulting array to another component without adding a `key` to each element.
  2. Storing pre-built JSX nodes in state/props (like `const buttons = data.map(...)`) and reusing that array without reattaching keys.
  3. Wrapping the list inside fragments or helper wrappers before handing it down, but the wrapper does not carry the key offered by the original elements.
  4. Calling `React.cloneElement` or `React.Children.map` inside the receiver and unintentionally overriding or dropping the original `key`.
  5. Using duplicate values (constant strings) or generated values such as `Math.random()`/`Date.now()` that change every render, and reusing array indexes for dynamic lists.

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

1Trace the warning to the component that receives the list

Open the browser console and follow the stack trace. The warning usually points to a component whose props.children or items prop contains an array of JSX nodes. Look for patterns like:

jsx
const menuItems = products.map(product => (
  <Item>{product.name}</Item> // no key yet
));
return <Menu options={menuItems} />;

React warns because the array menuItems is being passed down without keys; the recipient component only renders what it gets, so the keys must exist before the list is passed along.

2Assign stable keys before handing the array to the component

Give each mapped element a key that stays the same between renders. Prefer existing identifiers from your data instead of indexes:

jsx
const menuItems = products.map(product => (
  <MenuOption key={product.id} value={product.value} />
));
return <Menu options={menuItems} />;

If no natural ID exists, generate one when the data is created (uuid, crypto.randomUUID(), or a counter attached to the record) and store it on the item. Avoid keys based on Math.random() or index when the list can reorder, add, or remove elements, since React will reuse the wrong DOM nodes and the warning will return once the order changes.

3Preserve keys when the receiving component clones or filters children

If the component you pass the list to wraps, filters, or clones the children, do not drop their keys. Use React.Children.toArray or React.Children.map to access the original keys and forward them explicitly:

jsx
function Toolbar({ children }) {
  return (
    <nav>
      {React.Children.map(children, (child) =>
        React.cloneElement(child, { className: 'toolbar-item' })
      )}
    </nav>
  );
}

React.Children.map keeps the original keys, but if you manually wrap a child in another element, place the key on the wrapper level that you render or reuse the child's key before cloning. When you need to reorder or filter, React.Children.toArray(children) returns a flattened list with the keys React already assigns so you can inspect or re-map them without losing identity.

4Verify the warning disappears and list behavior stabilizes

After keys are in place, refresh the app and reproduce the dynamic scenarios covered by the component:

bash
# Open DevTools (F12) and clear the previous warning
# Add, remove, or reorder list entries
# Check the console for the missing-key warning
# Interact with inputs inside the list to ensure focus/state survives

If the warning persists, double-check that the key lives on the element returned directly from the .map (not on a child element inside a mapped component) and that no wrapper strips the original key.

Advanced notes

Keys are central to React's reconciliation algorithm; React tracks each sibling based on the key, not the index or the component type alone. When keys change, React unmounts the old component and mounts a new one, which is why the warning often accompanies unexpected state loss or focus jumps. This warning can also surface during server-side rendering/hydration if the server and client build the same list without keys, so keep your data sources consistent between server and client renders.

If you must filter or sort props.children, prefer React.Children.toArray(children) before the operation so React keeps track of the keys it already assigned. The ESLint rule react/jsx-key can catch missing keys at lint time and is especially helpful when you build arrays outside of the JSX expression. For long lists, consider virtualization libraries (react-window, react-virtuoso) and keep keys stable to prevent excessive re-renders even with pagination or infinite scroll.

Frequently asked questions

What does "Each child in a list passed to a component should have a unique "key"" mean?
React builds its internal reconciliation tree when you hand a child component an array of nodes, so each element inside that array needs a key the moment you create it. The warning differs from "Each child in a list should have a unique key prop" only because the list is being passed to another component (via a prop or children) instead of being rendered in place. children, the keys must already be set by the parent, otherwise React cannot tell which list item changed between renders.
How do I fix "Each child in a list passed to a component should have a unique "key""?
React warns with this message when you pass an array of JSX elements (for example via props.children or an items prop) to another component without giving each element a stable key. React uses the keys to match up elements across renders, so the warning signals that the list you handed off lacks identity.
What causes "Each child in a list passed to a component should have a unique "key""?
Mapping data into JSX and passing the resulting array to another component without adding a key to each element. Storing pre-built JSX nodes in state/props (like const buttons = data.map(...)) and reusing that array without reattaching keys. Wrapping the list inside fragments or helper wrappers before handing it down, but the wrapper does not carry the key offered by the original elements.
Is the "Each child in a list passed to a component should have a unique "key"" error serious?
It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading