React warning 'Each child in a list should have a unique "key" prop' appears in the console after using map() to render a list. How do I fix it correctly?

Cause: When you render an array of elements, React needs a stable identity for each item so it can tell which one was added, moved or removed. Without a key it warns, and falls back to position, which can cause wrong state or lost input when the list changes. Fix: 1. Put a key on the outermost element returned from the map callback, using a stable unique ID from your data: items.map(item => <li key={item.id}>{item.name}</li>). Database IDs are ideal. 2. If you extract a component, the key goes where you use it in the map, not inside the component: <Recipe key={recipe.id} {...recipe} />. 3. If each item renders several sibling nodes, the short <>...</> syntax cannot take a key. Import Fragment from react and use <Fragment key={item.id}>...</Fragment>. 4. For locally created items with no ID, generate one once when the item is created (a counter or crypto.randomUUID()) and store it with the item. 5. Do not use Math.random() or any value generated during render as a key: it changes every render, so React recreates every item. Avoid the array index for lists that can be reordered, filtered, inserted into or deleted from. Index is only acceptable for static lists that never change. 6. Keys need to be unique only among siblings, and they are not passed as a prop. If the component needs the ID, pass it under another prop name. Verify: reload and confirm the warning is gone from the console. Reorder or delete an item and check that any typed input or local state stays attached to the right row. Sources: https://react.dev/learn/rendering-lists https://react.dev/reference/react/Fragment