React TypeScript with Material UI

Question

I would like to ask for help. How can I be able to render these menus under their correct and proper category menu? Currently, they would just pile against each other instead of rendering from their proper menu. I am using React together with TypeScript and I have been working for this nonstop and haven't found an answer. Hope someone could help.

This is a sample photo of the problem. They're all overlapping and rendering together instead of rendering it differently from the other menu.

• This Message Menu would only render a Menu List drop down menu.

• This Operation Menu would and should only render Ack, Unack, Clear, and Comment

Here's my source code.

const handleClick = (index: null, event: React.MouseEvent<HTMLButtonElement>) => {
  setAnchorEl(event.currentTarget);
};

<Menu
  id="basic-menu"
  anchorEl={anchorEl}
  open={open}
  onClose={handleClose}
  MenuListProps={{
    "aria-labelledby": "basic-button",
  }}
>
  {customtoolinfo.menu_sub.map((custommenusubtool: any) => (
    <MenuItem onClick={handleClose}>
      {custommenusubtool.menu_sub_name}
    </MenuItem>
  ))}
</Menu>

Answer 1

The issue is because you have same anchorEl value of all sub menus. This issue can be fixed in many ways. One way is to have only one menu and render it's sub-menus based on condition or second way is to have different anchorEl state for every submenu and control them based on menu