MenuItem cannot be rendered outside a collection.

[NickWoodward]

I'm trying to implement the menu example, here: https://react-spectrum.adobe.com/react-aria/Menu.html#example
but, getting the error:

MenuItem cannot be rendered outside a collection.

And I'm not entirely sure why? Isn't a Menu component a collection?

<MenuTrigger>
  <Button aria-label="Menu">☰</Button>
  <Popover>
	  <Menu>
		  <MenuItem onAction={() => alert('open')}>Open</MenuItem>
		  <MenuItem onAction={() => alert('rename')}>Rename…</MenuItem>
		  <MenuItem onAction={() => alert('duplicate')}>Duplicate</MenuItem>
		  <MenuItem onAction={() => alert('share')}>Share…</MenuItem>
		  <MenuItem onAction={() => alert('delete')}>Delete…</MenuItem>
	  </Menu>
  </Popover>
</MenuTrigger>

[snowystinger]

Might have duplicate copies of some of our packages? Can you reproduce it in a codesandbox or stackblitz?

[NickWoodward]

yeah sure :)

Probably a skill issue still, but recreated it here:

https://stackblitz.com/edit/withastro-astro-xkekzy?file=src%2Flayouts%2FLayout.astro

[snowystinger]

Thanks, I'm not very familiar with Astro. What restrictions does it have on layouts? Can you render things with context? Does it run useEffects? Is the client:load thing needed to make it work?

[NickWoodward]

Thanks, I'm not very familiar with Astro. What restrictions does it have on layouts? Can you render things with context? Does it run useEffects? Is the client:load thing needed to make it work?

:)

Your questions made me notice the problem, thanks! The code works fine inside a React component, but not nested as children in an .astro file like that. So yes, you're right, it was restrictions on the layout (or more specifically the astro file).

Other answers: Context - no, useEffect -no, client:load yes, it's needed to provide interactivity.

Here's it working if you're interested: https://stackblitz.com/edit/withastro-astro-xkekzy?file=src%2Flayouts%2FLayout.astro

Thanks again!