Incorrect popover menu position when anchor element is externalized into another component - material-ui

Question

I'm new to both React and Material-UI. While examples work fine and perfectly make sense, they all use inline elements for both triggering button and the menu itself. I want to have some conditionals. For this, I'd rather have a separate component/function that renders this or that. However as soon as I move triggering button into a function, I get
Material-UI: the `anchorEl` prop provided to the component is invalid.
The anchor element should be part of the document layout.
Make sure the element is present in the document or that it's not display none.
I looked through similar questions here, but none of them looked relevant… or I didn't get them:(
Here is the code for modified example where I want to externalize button rendering into a function (to later add conditional and what not)
export default function SimpleMenu() {
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = event => {
setAnchorEl(event.currentTarget);
};
const Qqq = () => {
return (
<Button
aria-controls="simple-menu"
aria-haspopup="true"
onClick={handleClick}
>
Broken Menu
</Button>
)
}
const handleClose = () => {
setAnchorEl(null);
};
return (
<div>
<p> hello</p>
<Button
aria-controls="simple-menu"
aria-haspopup="true"
onClick={handleClick}
>
Open Menu
</Button>
<Qqq />
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem onClick={handleClose}>Profile</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem>
<MenuItem onClick={handleClose}>Logout</MenuItem>
</Menu>
</div>
);
}
Here is the fiddle
https://codesandbox.io/s/material-demo-7bnki?fontsize=14&hidenavigation=1&theme=dark . I did try to use SO code snippet, but I was getting some error about https://stacksnippets.net/js :(
What am I missing to make things work?

Answer 1

placing Qqq code inside SimpleManu is causing Qqq to remount on every SimpleMenu render.
Because Qqq remounted, the anchorEl reference is no longer valid.
To fix that, move Qqq outside SimpleMenu.
const Qqq = (props) => {
return (
<Button
aria-controls="simple-menu"
aria-haspopup="true"
onClick={props.handleClick}
>
Broken Menu
</Button>
)
}
export default function SimpleMenu() {
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = event => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<div>
<p> hello</p>
<Button
aria-controls="simple-menu"
aria-haspopup="true"
onClick={handleClick}
>
Open Menu
</Button>
<Qqq handleClick={handleClick}/>
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem onClick={handleClose}>Profile</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem>
<MenuItem onClick={handleClose}>Logout</MenuItem>
</Menu>
</div>
);
}
Code Sandbox
To see that Qqq really re mounts on every SimpleMenu render, go to the Code Sandbox and move Qqq to be inside SimpleMenu like before.
useEffect will print to console on every mount, and you can see what happens.