How to fix Warning: Each child in a list should have a unique "key" prop. in React

// ❌ Missing key
const listItems = users.map(user =>
  <li>{user.name}</li>
);

// ✅ Correct - key added
const listItems = users.map(user =>
  <li key={user.id}>{user.name}</li>
);

// ❌ Key on wrong element
const items = data.map(item => (
  <div>
    <h3 key={item.id}>{item.title}</h3>
    <p>{item.description}</p>
  </div>
));

// ✅ Key on wrapper div
const items = data.map(item => (
  <div key={item.id}>
    <h3>{item.title}</h3>
    <p>{item.description}</p>
  </div>
));

// ✅ Key on Fragment (using explicit Fragment syntax)
import { Fragment } from 'react';

const items = data.map(item => (
  <Fragment key={item.id}>
    <h3>{item.title}</h3>
    <p>{item.description}</p>
  </Fragment>
));

// ✅ Best - database ID or unique identifier
const items = products.map(product => (
  <ProductCard key={product.id} product={product} />
));

// ✅ Good - composite key if no single unique field
const items = comments.map(comment => (
  <Comment key={`${comment.userId}-${comment.timestamp}`} comment={comment} />
));

// ⚠️ Acceptable only for static lists that never reorder
const items = staticItems.map((item, index) => (
  <div key={index}>{item}</div>
));

// ❌ Bad - array index for dynamic lists
const items = todos.map((todo, index) => (
  <Todo key={index} todo={todo} />  // State issues when reordering!
));

import { nanoid } from 'nanoid';

// Add IDs when fetching data
const itemsWithIds = rawItems.map(item => ({
  ...item,
  id: nanoid()  // Generate once and store
}));

// Later when rendering
const list = itemsWithIds.map(item => (
  <Item key={item.id} item={item} />
));

import { hash } from 'some-hash-library';

const items = data.map(item => (
  <Item
    key={hash(JSON.stringify(item))}
    item={item}
  />
));

// OK if list never changes
const FIXED_MENU_ITEMS = ['Home', 'About', 'Contact'];
const menuItems = FIXED_MENU_ITEMS.map((label, index) => (
  <MenuItem key={index} label={label} />
));

// .eslintrc.json
{
  "extends": ["plugin:react/recommended"],
  "rules": {
    "react/jsx-key": ["error", {
      "checkFragmentShorthand": true,
      "checkKeyMustBeforeSpread": true,
      "warnOnDuplicates": true
    }]
  }
}

npx eslint src/**/*.{js,jsx,tsx}