/errors /react/each-child-unique-key-prop

Each child in a list should have a unique "key" prop

updated 2026-10-20

tool: React
exit code: 0
versions: React 16 – 19
os: any

React prints Each child in a list should have a unique "key" prop. in development when you render an array of elements, typically from items.map(...), and the elements have no key. React uses keys to match list items between renders; without them it falls back to positions, which breaks state and focus when items are added, removed or reordered.

Reproduce the warning

React 19 in Node.js, development build:

bash

npm init -y >/dev/null
npm install --silent --no-audit --no-fund react@19 react-dom@19 >/dev/null 2>&1
node -e '
const React = require("react");
const { renderToString } = require("react-dom/server");
const List = () => React.createElement("ul", null, ["a", "b"].map((x) => React.createElement("li", null, x)));
console.log(renderToString(React.createElement(List)));' 2>&1

Output

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

Check the render method of `List`. See https://react.dev/link/warning-keys for more information.
<ul><li>a</li><li>b</li></ul>

The warning names the component (Check the render method of List), which tells you which map() to fix.

Fix: a stable key from the data

jsx

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

With fragments, the short syntax cannot take a key; use Fragment:

jsx

import { Fragment } from 'react';

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

Sources

errors · reactError: Too many re-renders. React limits the number of renders to prevent an infinite loop.React throws Too many re-renders when a component sets state during render, often onClick={setCount(1)} instead of onClick={() => setCount(1)}. How to fix it.errors · nextjsHydration failed because the server rendered HTML didn't match the clientNext.js and React 19 report Hydration failed when server HTML differs from the first client render: Date.now(), window checks, locale formats, bad nesting.glossary · reactWhat is hydration in React and Next.js?Hydration is when React attaches event handlers and state to HTML rendered on the server, making a server-rendered page interactive without rebuilding it.

Reproduce the warning

Fix: a stable key from the data

Sources

Related pages