# NextJs throwing error for slice component requiring a unique key prop

**URL:** <https://community.prismic.io/t/nextjs-throwing-error-for-slice-component-requiring-a-unique-key-prop/14159>\
**Category:** Developing with Prismic\
**Created:** [September 22, 2023, 9:43pm UTC](https://community.prismic.io/t/nextjs-throwing-error-for-slice-component-requiring-a-unique-key-prop/14159 "2023-09-22T21:43:38Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![alisson2220](https://avatars.discourse-cdn.com/v4/letter/a/76d3ee/32.png) [@alisson2220](https://community.prismic.io/u/alisson2220)\
**Post date:** [September 22, 2023, 9:43pm UTC](https://community.prismic.io/t/nextjs-throwing-error-for-slice-component-requiring-a-unique-key-prop/14159/1 "2023-09-22T21:43:38Z")

</div>

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](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  
|

---

<div class="post-metadata">

**Author:** ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)\
**Post date:** [September 25, 2023, 10:09am UTC](https://community.prismic.io/t/nextjs-throwing-error-for-slice-component-requiring-a-unique-key-prop/14159/3 "2023-09-25T10:09:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![alisson2220](https://avatars.discourse-cdn.com/v4/letter/a/76d3ee/32.png) [@alisson2220](https://community.prismic.io/u/alisson2220)\
**Post date:** [October 23, 2023, 10:15pm UTC](https://community.prismic.io/t/nextjs-throwing-error-for-slice-component-requiring-a-unique-key-prop/14159/4 "2023-10-23T22:15:47Z")

</div>

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