React warningReact: “Each child in a list should have a unique "key" prop”

Why React needs the key, and the fix

1. 01

   The element returned from .map() has no key

   “Keys tell React which array item each component corresponds to, so that it can match them up later.” React, Rendering Lists

   React uses the key to tell which item is which between renders. The key goes on the outermost element inside the map callback, not on a child inside it and not on the list wrapper.

   // warns: no key
   {todos.map((todo) => <TodoItem todo={todo} />)}
   
   // works: stable id from the data
   {todos.map((todo) => <TodoItem key={todo.id} todo={todo} />)}

2. 02

   Use an id that comes with the data

   “Data from a database: If your data is coming from a database, you can use the database keys/IDs, which are unique by nature.” React, Rendering Lists

   Rows from a database already have a unique id; use it. For items created in the browser, give each one an id when you create it, with crypto.randomUUID() or a counter, and store it with the item. Keys only need to be unique within the same list.

3. 03

   The index or Math.random() as the key

   “This will cause keys to never match up between renders, leading to all your components and DOM being recreated every time.” React, Rendering Lists

   The array index silences the warning but breaks when items are inserted, removed or reordered, because a different item takes over the same key. Math.random() or crypto.randomUUID() called during render is worse: every render gets new keys, so React rebuilds every item and drops their state.

4. 04

   Several elements per item: use Fragment with a key

   “The short <>...</> Fragment syntax won’t let you pass a key” React, Rendering Lists

   When each item renders more than one element side by side, wrap them in Fragment and put the key there. The short <>...</> syntax has no place for a key.

   import { Fragment } from 'react';
   
   {people.map((person) => (
     <Fragment key={person.id}>
       <h2>{person.name}</h2>
       <p>{person.bio}</p>
     </Fragment>
   ))}

Checked against the vendor’s docs on November 7, 2026: React: Rendering Lists (keeping list items in order with key).

Rather hand it over?

Fixed scope, fixed price, paid upfront. The work happens in writing; no call needed.

• from $450App Fix TicketOne reproducible bug in an existing mobile or web app, diagnosed and fixed.See scope and start
• from $450AI-Built App RescueA Lovable, Bolt or Cursor app checked end to end in 3 days, then its worst problems fixed at a fixed price.No issues worth fixing, no charge. If the Launch Check finds nothing rated medium or higher, Simon refunds the full $450. You keep the report either way. This applies to the first 10 Launch Checks bought after October 30, 2026.See scope and start

Related: React “Invalid hook call” · React “Too many re-renders” · Next.js hydration error