Warning: Each child in a list should have a unique "key" prop. (false positive?) | Next.js | Page 1

acoustic stirrup Feb 17, 2023, 7:09 PM

#

I am getting this React keys warning: Warning: Each child in a list should have a unique "key" prop. See https://reactjs.org/link/warning-keys for more information., but it only appears in the server terminal and nowhere else (eslint / devtools). I've tried adding keys in multiple places, as well as commenting out code, but it seems like the issue persists no matter what

worthy bison Feb 17, 2023, 7:16 PM

#

Hi @acoustic stirrup are you using a map / each / for or foreach function?

acoustic stirrup Feb 17, 2023, 7:17 PM

#

I'm using a map in one place but it has a key value and is working properly, if I remove it I get errors in the browser console and eslint as well

worthy bison Feb 17, 2023, 7:18 PM

#

mmmh could you send me the code that is giving the error?

acoustic stirrup Feb 17, 2023, 7:18 PM

#

Error is only being logged to the node output and doesn't have a stack trace so I'm not sure

#

I will upload it to github

worthy bison Feb 17, 2023, 7:19 PM

#

@acoustic stirrup👍

acoustic stirrup Feb 17, 2023, 7:22 PM

#

https://github.com/taep96/taep96.moe-next

worthy bison Feb 17, 2023, 7:30 PM

#

im spinning it up @acoustic stirrup

worthy bison Feb 17, 2023, 7:50 PM

#

que

#

@acoustic stirrup can you remove the <head /> from layout.tsx?

acoustic stirrup Feb 17, 2023, 7:55 PM

#

Oh I totally forgot about it

#

The issue still persists though

worthy bison Feb 17, 2023, 7:55 PM

#

mmhh

#

it's weird too

#

// const title = "taep96's epic website";
// const description = "Hey there! I'm taep96!";
//
// const { href: canonical } = new URL(`https://${process.env.VERCEL_URL!}/`);
//
// export const metadata = {
//   title: {
//     default: title,
//     template: `%s | ${title}`,
//   },
//   description: description,
//   themeColor: "#202231",
//   alternates: { canonical },
//   openGraph: {
//     title,
//     description,
//     url: canonical,
//     images: [],
//     type: "website",
//   },
//   twitter: {
//     card: "summary",
//     title,
//     description,
//     siteId: "1541447528595554310",
//     creatorId: "1541447528595554310",
//     images: canonical + "apple-touch-icon.png",
//   },
//   icons: {
//     icon: [
//       { url: "/favicon-16x16.png", sizes: "16x16" },
//       { url: "/favicon-32x32.png", sizes: "32x32" },
//     ],
//     apple: {
//       url: "/apple-touch-icon.png",
//       sizes: "180x180",
//     },
//   },
// };
``` seems to have fixed the issue?

#

but not quite sure why

acoustic stirrup Feb 17, 2023, 8:06 PM

#

Maybe it's an issue with how metadata is implemented in next itself

#

Seems like it's the twitter part specifically

#Warning: Each child in a list should have a unique "key" prop. (false positive?)