NextJS giving me a warning and firebase hosting giving me error about children in lists not having unique keys even though I do

Question

I've been trying to figure this warning for a while, but I can't get it to stop. This is the warning:

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

Check the top-level render call using <ul>. See https://reactjs.org/link/warning-keys for more information.
    at target.default.Object.defineProperties.$$typeof.value (webpack-internal:///(rsc)/./node_modules/next/dist/build/webpack/loaders/next-flight-loader/module-proxy.js:84:27)

I followed the warning-keys link, and I made sure every list element had a unique key, but the problem still persists. Here's all the instances where I use list:

const MENU_LIST = [
  { text: "Stay Updated", href: "#stayupdated"},
  { text: "About Us", href: "#about"}
]

...

<ul className={styles.nav}>
  <Link  href={"/"}>
     <li className={styles.logo} key='home'>Company</li>
  </Link>
  {MENU_LIST.map((item) => (
    <Link href={item.href}>
      <li key={item.text} className={styles.links}>{item.text}</li>
    </Link>
    ))}
</ul>

const MENU_LIST = [
    { text: "About Us", href: "#about" ,},
    { text: "Stay Updated", href: "#stayupdated",},
    { text: "↑ Go Back to the Top of the Page", href: "/",}
]

...

<ul className={styles.nav}>
  {MENU_LIST.map((item) => (
    <Link href={item.href}>
      <li key={item.href} className={styles.links}>{item.text}</li>
    </Link>
    ))}
</ul>

<ul>
  <li key='stayUpdatedDiv'> <div>...</div> </li>
  <li key='stayUpdatedForm'> <form> ... </form> </li>
</ul>

Please help me figure out why I'm getting this error despite me specifying a unique key in every list element I could find. It has prevented me from being able to deploy on my domain :(

Answer 1

You need to add key - check the code below.

{MENU_LIST.map((item) => (
    <Link href={item.href} key={uniqueKey}> // <-
      <li key={item.text} className={styles.links}>{item.text}</li>
    </Link>
    ))}