Nav bar opens all menus simultaneously upon clicking

user_11326492 0
Viewed 124

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>
  );
}
navbar material-ui reactjs html
2 Answers

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
user_14475090 
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>
  );
user_113264920
Related