NextJs throwing error for slice component requiring a unique key prop

Developing with Prismic
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