Not able to compose components by inserting one Primitive inside another

[dannyboi07]

I am trying to use a Dialog component inside a Dropdown component. I have placed the trigger for the Dialog inside an item of the Dropdown menu, and I get the error "React.children.only expected to receive a single React element child".

Can I not use one primitive inside another?

Code:
Dropdown Menu

`

	<DropdownMenuContent sideOffset={15} align="end">
		<DropdownMenuItem>
                    <SettingsDialog />    // Dialog component
              </DropdownMenuItem>
		<DropdownMenuItem>
			Settings
		</DropdownMenuItem>
		<DropdownMenuSeparator />
		<DropdownMenuItem>
			Logout
		</DropdownMenuItem>
	</DropdownMenuContent>

`

Dialog Component

<StyledDialog> <StyledDialogTrigger asChild> Add contact </StyledDialogTrigger> <StyledDialogContent> <StyledDialogTitle>Settings</StyledDialogTitle> <StyledDialogDescription> Change your password, preferred theme. </StyledDialogDescription> <StyledDialogClose asChild> <button> Close </button> </StyledDialogClose> </StyledDialogContent> </StyledDialog>

[dannyboi07]

I was returning the Dialog out of another Functional Component. Decided to put the code on directly inside the Dropdown menu. I don't get that error anymore but now the Dialog isn't being triggered.

[benoitgrelard]

Hey @dannyboi07, here's an example of DropdownMenu + Dialog composition: https://codesandbox.io/s/dropdownmenu-dialog-nszobq?file=/src/App.js

[dannyboi07]

Hi Ben thanks for the reply. I got it functional and the error's gone, but I got another error which says "react-remove-scroll-bar: cannot calculate scrollbar size because it is removed (overflow:hidden on body". I have not hidden the overflow on the body?? This pops up when the Dialog opens after clicking on a Dropdown option.

Here's my changed code.

`

	<DropdownMenuContent
		sideOffset={15}
		align="end"
		hidden={settingsOpen}
	>
		<StyledDialog
			open={settingsOpen}
			onOpenChange={setSettingsOpen}
		>
			<StyledDialogTrigger asChild>
				<DropdownMenuItem
					onSelect={(e) => e.preventDefault()}
				>
					Settings
				</DropdownMenuItem>
			</StyledDialogTrigger>

			<StyledDialogPortal>
				<StyledDialogOverlay />
				<StyledDialogContent>
					<StyledDialogTitle>Settings</StyledDialogTitle>
					<StyledDialogDescription>
						Change your password, preferred theme.
					</StyledDialogDescription>
					<StyledDialogClose asChild>
						<button>
                                                                     Close
						</button>
					</StyledDialogClose>
				</StyledDialogContent>
			</StyledDialogPortal>
		</StyledDialog>
               </DropdownMenuContent>

`

[benoitgrelard]

That's just a dev warning from the 3rd party library we use internally, you can safely ignore it.

[dannyboi07]

Thank you!

[dannyboi07]

I got it working. If you want to open just one Dialog box to open from your Dropdown then Ben's link works.
I wanted multiple ones to open, and this solution works for me https://codesandbox.io/s/magical-grass-j85kbz?file=/src/App.js