Warning: Each child in a list should have a unique "key" prop. Warning: Each child in a list should have a unique "key" prop

Question

nextjs13.1 The key problem is prompted, but the format is unknown. Many similar answers have been searched, but this presentation method does not seem to be found. Is there a good way to solve it? A warning appears on the console:

next-dev.js?3515:20 Warning: Each child in a list should have a unique "key" prop.

Check the render method of `Links`. See https://reactjs.org/link/warning-keys for more information.
    at li
    at Links
    at div
    at footer
    at Footer
    at div
    at Home
    at PersistGate (webpack-internal:///./node_modules/redux-persist/es/integration/react.js:39:5)
    at Provider (webpack-internal:///./node_modules/react-redux/es/components/Provider.js:13:3)
    at MyApp (webpack-internal:///./pages/_app.js:21:11)
    at PathnameContextProviderAdapter (webpack-internal:///./node_modules/next/dist/shared/lib/router/adapters.js:62:11)
    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:301:63)
    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:850:919)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:62:1)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:172:11)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:347:11)

This is my code from nextjs13.1. Please help me. How should I add key to this writing format：

import styles from "./styles.module.scss";
import Link from "next/link";

export default function Links() {
  return (
    <div className={styles.footer_links}>
      {
        links.map((link, i) =>(
          <ul>
            {
              i ===0 ? (
              <img src="../images/logo.png" alt="" />
              ) : (
                    <b>{link.heading}</b>
              )}
            {
              link.links.map((link) =>(
                <li>
                  <Link href={link.link}>{link.name}</Link>
                </li>
              ))
            }
          </ul>
        ))
      }
    </div>
  );
}

const links = [
  {
    heading: "SHOPPAY",
    links: [
      {
        id: 1,
        name: "About us",
        link: "/about",
      },
      {
        name: "Contact us",
        link: "",
      },
      {
        name: "Social Responsibility",
        link: "",
      },
    ],
  },
  {
    heading: "HELP & SUPPORT",
    links: [
      {
        name: "Shipping Info",
        link: "",
      },
      {
        name: "Returns",
        link: "",
      },
      {
        name: "How To Order",
        link: "",
      },
      {
        name: "How To Track",
        link: "",
      },
      {
        name: "Size Guide",
        link: "",
      },
    ],
  },
  {
    heading: "CUSTOMER SERVICE",
    links: [
      {
        name: "Customer service",
        link: "",
      },
      {
        name: "Terms and Conditions",
        link: "",
      },
      {
        name: "Consumers(Transactions)",
        link: "",
      },
      {
        name: "Take our feedback survey",
        link: "",
      },
    ],
  },
];

Does this answer your question? [Warning: Each child in a list should have a unique "key" prop](https://stackoverflow.com/questions/55153873/warning-each-child-in-a-list-should-have-a-unique-key-prop) — Ken White, Feb 11 '23 at 03:43

Sean W · Accepted Answer · 2023-02-11T03:44:24.197

React requires every element in a loop like map to have a key prop with a unique value, like an ID. In your case, both map functions need to define a key on the returned parent element.

If your ID keys are incremented numbers, they should also be avoided since these IDs are not globally unique.

Typically the index i shouldn't be used for the key, but in your case, another unique string isn't defined for every item.

links.map((link, i) =>(
 <ul key={`link-${i}`}>
  {link.links.map((link, i) =>(
    <li key={`sublink-${i}`}>...</li>
  ))}
 </ul>
))

A best-case scenario is that you globally unique IDs defined for each link, and the ID is used as the keys.

links.map((link) =>(
 <ul key={link.id}>
  {link.links.map((link) =>(
    <li key={link.id}>...</li>
  ))}
 </ul>
))

Warning: Each child in a list should have a unique "key" prop. Warning: Each child in a list should have a unique "key" prop

1 Answers1