Next.js 13.5 Upgrade: 'Key' Prop Warning Issue
Unanswered
Artzeeker posted this in #help-forum
I upgraded Next.js to the latest version, 13.5. When I ran the CLI, it displayed a warning message: 'Warning: Each child in a list should have a unique "key" prop.' However, it didn't specify where this issue occurred, and I have many array.map iterations in my project. Could you provide a solution to resolve this?
By the way, I really appreciate the new clean CLI interface â¤ï¸.
By the way, I really appreciate the new clean CLI interface â¤ï¸.
13 Replies
The fixes are:
- add the key prop
- disable the eslint rule(will never recommend this)
- add the key prop
- disable the eslint rule(will never recommend this)
@@ts-ignore you must add key in every array.map
i did it, but i warning me about duplicates key and hard to find it
@Artzeeker i did it, but i warning me about duplicates key and hard to find it
maybe you're rendering same item again and again in same map?
@@ts-ignore maybe you're rendering same item again and again in same map?
I'm not sure, so I'll try removing the array.map calls one by one to pinpoint where the issue is occurring. By the way, will future versions of the Next.js CLI provide more specific information about where this issue occurs?
in the console
it doesn't show in the browser console but cli. maybe this is server component
yeah then that is the reason
@Artzeeker I upgraded Next.js to the latest version, 13.5. When I ran the CLI, it displayed a warning message: 'Warning: Each child in a list should have a unique "key" prop.' However, it didn't specify where this issue occurred, and I have many array.map iterations in my project. Could you provide a solution to resolve this?
By the way, I really appreciate the new clean CLI interface â¤ï¸.<:thinq:1150495833716969623>
i also saw a github issue about this; i think this is a nextjs 13.5 bug
Usually this would be an warning in console. But if you install eslint it would turned to be a build error. The only way to remove it check and provide where you missed any key prop ( might be in the map function) .This error pops up since you really missed any key props..just find it and provide it.
In addition to above , if this is an warning in your case then you can suppress all warnings from console. . Just follow below in layout.ts
<body supressHydrationWarning={true}>{children}</body>
<body supressHydrationWarning={true}>{children}</body>