NextJs throwing error for slice component requiring a unique key prop

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

Check the top-level render call using . See for more information.
at MainSlice (webpack-internal:///./slices/MainSlice/index.tsx:18:26)
at LoadableComponent (/home/node/app/node_modules/next/dist/shared/lib/loadable.js:111:9)
at SliceZone (/home/node/app/node_modules/@prismicio/react/dist/SliceZone.cjs:18:22)
at div
at div
at article
at main
at Blog (webpack-internal:///./pages/renda-variavel/blog/[slug].tsx:31:17)
at App (webpack-internal:///./pages/_app.tsx:23:16)
at StyleRegistry (/home/node/app/node_modules/styled-jsx/dist/index/index.js:449:36)
at PathnameContextProviderAdapter (/home/node/app/node_modules/next/dist/shared/lib/router/adapters.js:78:11)
at AppContainer (/home/node/app/node_modules/next/dist/server/render.js:341:29)
at AppContainerWithIsomorphicFiberStructure (/home/node/app/node_modules/next/dist/server/render.js:377:57)
at div
at Body (/home/node/app/node_modules/next/dist/server/render.js:677:21)

I added the key as {"_"+Math.random()}, but the error keeps showing up.

| key={"_"+Math.random()}
| data-slice-type={slice.slice_type}
| data-slice-variation={slice.variation}
| className='flex flex-col gap-4'
| >

Hey @alisson2220, could you please provide additional context or code related to the "MainSlice" component, especially around the section where the error is occurring?

I just realized the issue.

I placed the components inside a react fragment.
I corrected it by including a key for the react fragment.

{, idx) => {
return (
<React.Fragment key={idx}>
hyperlink: ({ node, children }) => (
<Link className="text-blue-600 hover:underline" href={ as unknown as Url}>{children}
<PrismicNextImage field={text.image} key={rti_${idx}} />

Thank you, anyway

1 Like