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

A list rendered with map gave its items no stable ID, so React can’t tell which item is which when the list changes.

Browser console
Each child in a list should have a unique "key" prop. Check the render method of `TodoList`. See https://react.dev/link/warning-keys for more information.

Also appears as

  • Warning: Each child in a list should have a unique "key" prop. Check the render method of `TodoList`. See https://reactjs.org/link/warning-keys for more information.
  • Encountered two children with the same key, `1`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

Prompt to fix it

React warns "Each child in a list should have a unique "key" prop." Find every .map() in the component named in the warning and its children. Put a key on the outermost element each map returns, using a stable unique ID from the data such as item.id. Use <Fragment key={...}> where the map returns a fragment. If the data has no ID, add one when items are created instead of in render. Don’t use the array index or Math.random() as the key.

Paste into Layerwise or any AI coding tool.

What it means

When you render a list with .map(), React needs a key on each item: a value that identifies that item among its siblings. Keys let React match items between renders, so when you add, remove, or reorder rows, it updates the right ones and keeps each row’s state, focus, and input text with it.

Without keys, React falls back to each item’s position. That works until the list changes. Then text typed into one row can jump to another, a checkbox stays checked on the wrong item, and animations play on the wrong element.

Using the array index, as in key={index}, hides the warning and keeps the same bugs, because the index of an item changes when items are added or removed above it. Use an ID that belongs to the data, such as the id column from your database.

Common causes

  • A .map() returns elements with no key prop.
  • The key sits on an inner element instead of the outermost element that .map() returns.
  • The .map() returns a fragment written as <>...</>, which can’t take a key.
  • Two items share a key, because the key uses a value like a name or status that repeats.

How to fix it

  1. Open the component named in “Check the render method of …” and find its .map() calls.
  2. Add key={item.id} to the outermost element each .map() returns.
  3. If that element is a fragment, write <Fragment key={item.id}> instead of <>.
  4. If the data has no ID, add one when the data is created, for example with crypto.randomUUID(), and store it with the item.
  5. For a duplicate key, switch to a field that is unique for every item.

Example fix

import { Fragment } from 'react';

type Todo = { id: string; title: string; note: string };

export function TodoList({ todos }: { todos: Todo[] }) {
  return (
    <dl>
      {todos.map((todo) => (
        // The key goes on the outermost element map returns.
        <Fragment key={todo.id}>
          <dt>{todo.title}</dt>
          <dd>{todo.note}</dd>
        </Fragment>
      ))}
    </dl>
  );
}

Related errors

All errors
Objects are not valid as a React child (found: object with keys {id, title}). If you meant to render a collection of children, use an array instead.

Objects are not valid as a React child

React was asked to show a whole object, such as a database row or a date, on the page, and it can only show text, numbers, and elements.

TypeError: data.map is not a function

X is not a function

The code called something that isn’t a function, most often .map on API data that came back as an object or a string instead of an array.

TypeError: Cannot read properties of undefined (reading 'map')

Cannot read properties of undefined

The code asked for a property of a value that doesn’t exist yet, usually data that hasn’t loaded or a field the API didn’t return.

Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used: - A server/client branch `if (typeof window !== 'undefined')`. - Variable input such as `Date.now()` or `Math.random()` which changes each time it's called. - Date formatting in a user's locale which doesn't match the server. - External changing data without sending a snapshot of it along with the HTML. - Invalid HTML tag nesting. It can also happen if the client has a browser extension installed which messes with the HTML before React loaded. https://react.dev/link/hydration-mismatch

Hydration failed

The HTML the server sent didn’t match what React rendered first in the browser, so React threw that part away and rebuilt it on the client.

Build with an agent that checks its work

The Layerwise agent clicks through the live preview and reads the console, so it catches errors before you do.

DownloadRead the docs