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>

Shikhar Awasthi · Accepted Answer · 2022-06-25 09:16:28Z

2

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

answered Jun 25, 2022 at 9:16

Shikhar Awasthi

1,2341 gold badge5 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React TypeScript with Material UI

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related