Issue in handling click event in Material UI Menu component-CodePudding

I have added the Menu Component from Material UI like this -

<Menu
    open={open}
    id={id}
    onClose={handleClose}
    onClick={handleClick}
    anchorEl={anchorEl}
    transformOrigin={{ horizontal: transformOriginRight, vertical: transformOriginTop }}
    anchorOrigin={{ horizontal: anchorOriginRight, vertical: anchorOriginBottom }}
  >
    { items.map(item => (
      <MenuItemMUI key={item.id}>{item.name}</MenuItemMUI>
    ))}

  </Menu>

And my clickHandler goes like this -

const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(null);
    console.log(event.target.name);
  };

Screenshot of what has been done -

I am trying to get the Logout/My Profile in handleClick so that I can navigate it to the respective pages. But not getting anything inside the console statement. Can anyone help here.

CodePudding user response：

Add click method to MenuItemMUI

<MenuItemMUI key={item.id} onClick={() => handleItemClick(item)}>{item.name}</MenuItemMUI>

CodePudding user response：

You can set the onClick method for just the logout item.

Instead of:

<MenuItemMUI key={item.id}>{item.name}</MenuItemMUI>

You can write:

<>
  {item.name === 'Logout' && (
    <MenuItemMUI key={item.id} onClick={handleLogout}>{item.name}</MenuItemMUI>
  )}
  {item.name !== 'Logout' && (
    <MenuItemMUI key={item.id}>{item.name}</MenuItemMUI>
  )}
</>

handleLogout needs to be defined somewhere in the scope of this component.