Next.js Discord

Discord Forum

ISR Rendering Method, Dynamic Route, Warning: Each child in a list should have a unique "key" prop.

Answered
American Pipit posted this in #help-forum
Open in Discord
American PipitOP
i have dynamic routes ([slug].js) but the warning says 
client.js:1  Warning: Each child in a list should have a unique "key" prop.

Check the render method of `SlugPage`. See https://reactjs.org/link/warning-keys for more information.
    at SlugPage (webpack-internal:///./src/pages/[slug].js:20:11)
    at App (webpack-internal:///./src/pages/_app.js:12:11)
    at PathnameContextProviderAdapter (webpack-internal:///./node_modules/next/dist/shared/lib/router/adapters.js:80:11)
    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:306:63)
    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:858:919)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:92:1)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:197:11)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:380:11)


i have put the key props at parent component :
export default function SlugPage({ data }) {
  return (
    <main key={data.id} ...>
      ...
    </main>
  )
}

but still giving me the warning how to solve it?
Answered by fuma
Yeah, use <Fragment key={…} /> instead
View full answer

4 Replies

fuma
Can you show the full code of your SlugPage?
American PipitOP
ah i just found out the warning come from this
        {data.attributes.links.data.map((item, index) => (
          <>
            {item.attributes.status === "active" ? (
              <a
                key={index}
                className="h-full w-full bg-gray-400 bg-clip-padding backdrop-filter backdrop-blur-sm bg-opacity-30 rounded-[24px] p-4 hover:scale-105 transition-all cursor-pointer"
                href={item.attributes.link}
                target='_blank'
                rel='noopener noreferrer'
              >{item.attributes.title}</a>
            ) : item.attributes.status === "suspend" ? (
              <a
                key={index}
                className="h-full w-full bg-red-400 bg-clip-padding backdrop-filter text-red-300 text-opacity-50 backdrop-blur-sm bg-opacity-20 rounded-[24px] p-4 hover:scale-105 transition-all cursor-pointer"
                target='_blank'
                rel='noopener noreferrer'
              >{item.attributes.title} <span className='text-red-600 ms-1'>[SUSPENDED]</span></a>
            ) : ('')
            }

          </>
        ))}
fuma
Yeah, use <Fragment key={…} /> instead
Answer
American PipitOP
thanks!