Nav Bar Opens All Menus Simultaneously Upon Clicking

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

Solution 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'}  <== thisis the important one... right now all 3 are set to whatever was just clicked

Solution 2:

functionNavbarAdmin() {
  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);

  consthandleNavMenuOpen = (event) => {
    setAnchorEl1(event.currentTarget);
  }

  consthandleProfileMenuOpen = (event) => {
    setAnchorEl2(event.currentTarget);
  };

  consthandleManageMenuOpen = (event) => {
    setAnchorEl3(event.currentTarget);
  };

  consthandleNavMenuClose = () => {
    setAnchorEl1(null);
  };

  consthandleProfileMenuClose = () => {
    setAnchorEl2(null);
  };

  consthandleManageMenuClose = () => {
    setAnchorEl3(null);
  };

  const navMenu = (
    <MenuanchorEl={anchorEl1}anchorOrigin={{vertical: 'top', horizontal: 'left' }}
    keepMountedtransformOrigin={{vertical: 'top', horizontal: 'left' }}
    open={isNavMenuOpen}onClose={handleNavMenuClose}
  ><MenuItemonClick={handleNavMenuClose}>Home</MenuItem><MenuItemonClick={handleNavMenuClose}>Movies</MenuItem><MenuItemonClick={handleNavMenuClose}>Concessions</MenuItem><MenuItemonClick={handleNavMenuClose}>Showtimes</MenuItem></Menu>
  )

  const userMenu = (
    <MenuanchorEl={anchorEl2}anchorOrigin={{vertical: 'top', horizontal: 'right' }}
      keepMountedtransformOrigin={{vertical: 'top', horizontal: 'right' }}
      open={isProfileMenuOpen}onClose={handleProfileMenuClose}
    ><MenuItemonClick={handleProfileMenuClose}>Profile</MenuItem><MenuItemonClick={handleProfileMenuClose}>My account</MenuItem><MenuItemonClick={handleProfileMenuClose}>Sign Out</MenuItem></Menu>
  );

  const manageMenu = (
    <MenuanchorEl={anchorEl3}anchorOrigin={{vertical: 'top', horizontal: 'right' }}
    keepMountedtransformOrigin={{vertical: 'top', horizontal: 'right' }}
    open={isManageMenuOpen}onClose={handleManageMenuClose}
  ><MenuItemonClick={handleManageMenuClose}>Movies</MenuItem><MenuItemonClick={handleManageMenuClose}>Seats</MenuItem></Menu>
  );