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

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:

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.

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

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.

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:

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.

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

# 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.