Popover not setting 'key' prop internally

[yashwason]

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.

[thecrypticace]

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!