Popover not setting 'key' prop internally
yashwason opened this issue · comments
Yash Wason commented
What package within Headless UI are you using?
@headlessui/react
What version of that package are you using?
v2.0.4
What browser are you using?
Chrome 126.0.6478.62
Reproduction URL
https://codesandbox.io/p/sandbox/headless-ui-react-popover-missing-keys-74z5yc
Describe your issue
It seems that HeadlessUI's Popover does not set keys somewhere internally. React throws a warning in the browser console; you may confirm this in the Sandbox itself.
Jordan Pittman commented
Hey — you need to set a key on your Fragment
. Instead of this:
{menuLinks.map((link) => (
<>
<a key={link.href + link.linkText} href={link.href}>
{link.linkText}
</a>
</>
))}
You want this:
{menuLinks.map((link) => (
<Fragment key={link.href + link.linkText}>
<a href={link.href}>
{link.linkText}
</a>
</Fragment>
))}
Hope that helps!