Nav bar opens all menus simultaneously upon clicking - html

Question

This code snippet is my nav bar for an admin user. The intended behavior is that there are 3 icons (navigation menu, user menu, and manage button icons). The issue is that the drop down items from each of these icons all display when clicking on any of the icons. The intended behavior is to get each dropdown menu to display the selected information for that given icon.
function NavbarAdmin() {
const classes = navbarStyle();
const [anchorEl, setAnchorEl] = React.useState(null);
const isMenuOpen = Boolean(anchorEl);
const handleProfileMenuOpen = (event) => {
setAnchorEl(event.currentTarget);
};
const handleNavMenuOpen = (event) => {
setAnchorEl(event.currentTarget);
};
const handleManageMenuOpen = (event) => {
setAnchorEl(event.currentTarget);
};
const handleMenuClose = () => {
setAnchorEl(null);
};
const userMenu = (
<Menu
anchorEl={anchorEl}
anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
keepMounted
transformOrigin={{ vertical: 'top', horizontal: 'left' }}
open={isMenuOpen}
onClose={handleMenuClose}
>
<MenuItem onClick={handleMenuClose}>Profile</MenuItem>
<MenuItem onClick={handleMenuClose}>My account</MenuItem>
<MenuItem onClick={handleMenuClose}>Sign Out</MenuItem>
</Menu>
);
const navMenu = (
<Menu
anchorEl={anchorEl}
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
keepMounted
transformOrigin={{ vertical: 'top', horizontal: 'right' }}
open={isMenuOpen}
onClose={handleMenuClose}
>
<MenuItem onClick={handleMenuClose}>Home</MenuItem>
<MenuItem onClick={handleMenuClose}>Movies</MenuItem>
<MenuItem onClick={handleMenuClose}>Concessions</MenuItem>
<MenuItem onClick={handleMenuClose}>Showtimes</MenuItem>
</Menu>
);
const manageMenu = (
<Menu
anchorEl={anchorEl}
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
keepMounted
transformOrigin={{ vertical: 'top', horizontal: 'right' }}
open={isMenuOpen}
onClose={handleMenuClose}
>
<MenuItem onClick={handleMenuClose}>Movies</MenuItem>
<MenuItem onClick={handleMenuClose}>Seats</MenuItem>
<MenuItem onClick={handleMenuClose}>Test</MenuItem>
<MenuItem onClick={handleMenuClose}>Test</MenuItem>
<MenuItem onClick={handleMenuClose}>Test</MenuItem>
<MenuItem onClick={handleMenuClose}>Test</MenuItem>
</Menu>
);
return (
<div className={classes.grow}>
<AppBar position="static">
<Toolbar>
<IconButton
edge="start" className={classes.menuButton}
color="inherit"
aria-label="nav account"
aria-haspopup="true"
onClick={handleNavMenuOpen}
color="inherit"
>
<MenuIcon />
</IconButton>
<Typography className={classes.acptheater} variant="h6" noWrap>
ACP Theater
</Typography>
<div className={classes.grow} />
<div>
<IconButton aria-label="show messages" color="inherit">
<Badge badgeContent={1} color="secondary">
<MailIcon />
</Badge>
</IconButton>
<IconButton
edge="end" className={classes.menuButton}
aria-label="user account"
aria-haspopup="true"
onClick={handleProfileMenuOpen}
color="inherit"
>
<AccountCircle />
</IconButton>
<Button
edge="end" className={classes.menuButton}
aria-label="user account"
aria-haspopup="true"
onClick={handleManageMenuOpen}
color="inherit"color="inherit"
>
Manage</Button>
<Button color="inherit">Login</Button>
</div>
</Toolbar>
</AppBar>
{manageMenu}
{navMenu}
{userMenu}
</div>
);
}

Answer 1

All three <Menu...s have anchorEl={anchorEl} - so whatever is set on state setAnchorEl() will match all three.
Those <Menu parameters should be hard-coded with the desired match value.
Example:
const handleProfileMenuOpen = (event) => {
setAnchorEl('menuProfile');
};
...
const userMenu = (
<Menu
anchorEl={'menuProfile'} <== this is the important one... right now all 3 are set to whatever was just clicked

Answer 2

function NavbarAdmin() {
const classes = navbarStyle();
const [anchorEl1, setAnchorEl1] = React.useState(null);
const [anchorEl2, setAnchorEl2] = React.useState(null);
const [anchorEl3, setAnchorEl3] = React.useState(null);
const isNavMenuOpen = Boolean(anchorEl1);
const isProfileMenuOpen = Boolean(anchorEl2);
const isManageMenuOpen = Boolean(anchorEl3);
const handleNavMenuOpen = (event) => {
setAnchorEl1(event.currentTarget);
}
const handleProfileMenuOpen = (event) => {
setAnchorEl2(event.currentTarget);
};
const handleManageMenuOpen = (event) => {
setAnchorEl3(event.currentTarget);
};
const handleNavMenuClose = () => {
setAnchorEl1(null);
};
const handleProfileMenuClose = () => {
setAnchorEl2(null);
};
const handleManageMenuClose = () => {
setAnchorEl3(null);
};
const navMenu = (
<Menu
anchorEl={anchorEl1}
anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
keepMounted
transformOrigin={{ vertical: 'top', horizontal: 'left' }}
open={isNavMenuOpen}
onClose={handleNavMenuClose}
>
<MenuItem onClick={handleNavMenuClose}>Home</MenuItem>
<MenuItem onClick={handleNavMenuClose}>Movies</MenuItem>
<MenuItem onClick={handleNavMenuClose}>Concessions</MenuItem>
<MenuItem onClick={handleNavMenuClose}>Showtimes</MenuItem>
</Menu>
)
const userMenu = (
<Menu
anchorEl={anchorEl2}
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
keepMounted
transformOrigin={{ vertical: 'top', horizontal: 'right' }}
open={isProfileMenuOpen}
onClose={handleProfileMenuClose}
>
<MenuItem onClick={handleProfileMenuClose}>Profile</MenuItem>
<MenuItem onClick={handleProfileMenuClose}>My account</MenuItem>
<MenuItem onClick={handleProfileMenuClose}>Sign Out</MenuItem>
</Menu>
);
const manageMenu = (
<Menu
anchorEl={anchorEl3}
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
keepMounted
transformOrigin={{ vertical: 'top', horizontal: 'right' }}
open={isManageMenuOpen}
onClose={handleManageMenuClose}
>
<MenuItem onClick={handleManageMenuClose}>Movies</MenuItem>
<MenuItem onClick={handleManageMenuClose}>Seats</MenuItem>
</Menu>
);