MenuItem navigation inside AppBar in material-ui - react-router

Question

I am trying to compose a navbar inside the AppBar in material-ui. I have the following code.
Currently, using #material-ui/core version 3.9.2.
class Header extends Component {
handleMenuOpen = ev => {
this.setState({ anchorAccountMenu: ev.currentTarget });
}
handleMenuClose = ev => {
this.setState({ anchorAccountMenu: null });
}
menuGotoUrl = siteUrl => ev => {
console.log(siteUrl);
this.props.history.push(siteUrl);
this.handleMenuClose(ev);
}
render() {
let { classes } = this.props;
let { anchorAccountMenu } = this.state;
const user = UserService.currentUser();
let userFirstChar = user.name.charAt(0).toUpperCase();
return (<AppBar><Toolbar>
{ /* Some more content here... */ }
<Button onClick={ this.handleMenuOpen }>
<span className={ classes.nameInButton }>{ `${user.name}` }</span>
<Avatar className={ classes.avatar }>{ userFirstChar }</Avatar>
</Button>
<Menu
id="user-menu" anchorEl={ anchorAccountMenu }
getContentAnchorEl= { null }
disableAutoFocusItem={ true }
anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
transformOrigin={{ vertical: "top", horizontal: "right" }}
open={ !!anchorAccountMenu } onClose={ this.handleMenuClose }>
<MenuItem onClick={ this.menuGotoUrl("/profile/edit") }>
<ListItemIcon className={ classes.menuIcon }>
<Icon className="far fa-fw fa-user" />
</ListItemIcon>
<ListItemText inset primary="Profile" />
</MenuItem>
<MenuItem onClick={ this.handleLogout }>
<ListItemIcon className={ classes.menuIcon }>
<Icon className="fas fa-fw fa-sign-out-alt" />
</ListItemIcon>
<ListItemText inset primary="Logout" />
</MenuItem>
</Menu>
</Toolbar></AppBar>)
}
}
export default withRouter(withStyles(styles)(Header));
The problem is when I select the profile menuItem, it returns me error, instead of navigate to /profile/edit via react-routes-dom and close the menu.
Error:
react-dom.development.js:57 Uncaught Invariant Violation: Unable to find node on an unmounted component.
at invariant (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:57:19)
at findCurrentFiberUsingSlowPath (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:4395:31)
at findCurrentHostFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:4407:27)
at findHostInstanceWithWarning (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:21470:25)
at Object.findDOMNode (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22022:18)
at ref (webpack-internal:///./node_modules/#material-ui/core/MenuList/MenuList.js:203:46)
...
...
What am I missing here? Thanks.

Answer 1

I finally solve it by placing <Menu/> with <MenuList />. Not sure how's it different internally. This is also the alternative of building menu from material-ui from the doc.
Specifically, this is what I do:
render() {
let { classes } = this.props;
let { anchorAccountMenu } = this.state;
const user = UserService.currentUser();
let userFirstChar = user.name.charAt(0).toUpperCase();
return (<AppBar><Toolbar>
{ /* Some more content here... */ }
<Button onClick={ this.handleMenuOpen }>
<span className={ classes.nameInButton }>{ `${user.name}` }</span>
<Avatar className={ classes.avatar }>{ userFirstChar }</Avatar>
</Button>
<Popper open={ !!anchorAccountMenu } anchorEl={ anchorAccountMenu }
transition disablePortal>{ ({ TransitionProps }) => (
<Grow {...TransitionProps} id="menu-item-grow"
style={{ transformOrigin: 'center top' }}
><Paper><ClickAwayListener onClickAway={ this.handleMenuClose }>
<MenuList>
<MenuItem onClick={ this.menuGotoUrl("/profile/edit") }>
<ListItemIcon className={ classes.menuIcon }>
<Icon className="far fa-fw fa-user" />
</ListItemIcon>
<ListItemText inset primary="Profile" />
</MenuItem>
<MenuItem onClick={ this.handleLogout }>
<ListItemIcon className={ classes.menuIcon }>
<Icon className="fas fa-fw fa-sign-out-alt" />
</ListItemIcon>
<ListItemText inset primary="Logout" />
</MenuItem>
</MenuList>
</ClickAwayListener></Paper></Grow>
) }</Popper>
</Toolbar></AppBar>)
}
}