score:0

you can try something like this:

const navbarmainmenu = () => {
  const [anchorels, setanchorels] = usestate({}) // <-- here use a object
  const isopen = (id) => boolean(anchorels[id]) // <-- here you need a function to get if open is true

  const handleclick = (event, id) => {
    setanchoresl({ ...anchorels, [id]: event.currenttarget }) // <-- here you set anchor value using an id
  }
  const handleclose = (id) => {
    setanchorels({ ...anchorels, [id]: null }) // <-- here you delete anchor value by id
  }

  return (
    <>
      <box sx={{ flexgrow: 1, display: { xs: "none", lg: "flex" } }}>
        {pages.map(page => {
          return (
            <>
              <button
                key={page.title}
                id={page.title + "-button"}
                onclick={(event) => handleclick(event, page.title)}
                aria-controls={isopen(page.title) ? page.title : undefined}
                aria-haspopup="true"
                aria-expanded={isopen(page.title) ? "true" : undefined}
              >
                {page.title}
              </button>
              <menu
                anchorel={anchorels[page.title]}
                id={page.title}
                open={isopen(page.title)}
                onclose={() => handleclose(page.title)}
                onclick={() => handleclose(page.title)}
                transformorigin={{ horizontal: "right", vertical: "top" }}
                anchororigin={{ horizontal: "right", vertical: "bottom" }}
              >
                {page.children.map(child => {
                  return <menuitem key={child.title}>{child.title}</menuitem>
                })}
              </menu>
            </>
          )
        })}
      </box>
    </>
  )
}

Related Query

More Query from same tag