NextJs throwing error for slice component requiring a unique key prop

Developing with Prismic
1

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

Check the top-level render call using . See https://reactjs.org/link/warning-keys 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 {slice.id+"_"+Math.random()}, but the error keeps showing up.

|<section
| key={slice.id+"_"+Math.random()}
| data-slice-type={slice.slice_type}
| data-slice-variation={slice.variation}
| className='flex flex-col gap-4'
| >
|ERROR FOR THIS SECTION
|

3

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

4

I just realized the issue.

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

{slice.items.map((text, idx) => {
return (
<React.Fragment key={idx}>
<PrismicRichText
field={text.body}
key={rtb_${idx}}
components={{
hyperlink: ({ node, children }) => (
<Link className="text-blue-600 hover:underline" href={node.data?.url as unknown as Url}>{children}
),
}}
/>
<PrismicNextImage field={text.image} key={rti_${idx}} />
</React.Fragment>
)
})}

Thank you, anyway

1 Like