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>
</>
)
}
Source: stackoverflow.com
Related Query
- Open a Single Dropdown Menu (Instead of all of them)
- onClick Open all Dropdown Menu in table rows
- React dropdown function triggers all dropdowns instead of selected menu
- How to make a dropdown menu open below the Appbar using Material-UI?
- React-Select : How to rotate dropdown indicator when menu open
- Changed style onClick applies to all the ListItems instead of single ListItems
- How to open one instead of all divs created using .map()
- Reactjs - Toggle dropdown menu on click outside anywhere on page instead of just click on the icon
- Headless UI Dropdown - Open menu above the button
- How to open specific post dropdown menu without effecting the others?
- How to open Material UI Menu component to the left instead of the right?
- React array mapping, toggles all drop-downs on click, I want to open the dropdown for the clicked card only
- React JS onClick Open Current Dropdown Menu
- React loading HOC: all the props provided in a list are set to optional and if any of them is undefined shows a spinner instead of the component
- How to keep the common React Components fixed in all pages instead of calling them again and again in each page
- How to update upvote counter for individual elements instead of all of them at once with React
- React function returns the last item in the JSON instead of mapping all of them
- Apply sorting on all table users instead of the users of a single page
- Custom react dropdown menu not open close properly
- reactjs dropdown close the open menu
- React Dropdown Menu Opens All Dropdown Menus at Once
- How to display all values from a json api into a single dropdown list using React JS?
- Using Bootstrap with React: Bootstrap dropdown menu does not open
- The React Bootstrap dropdown menu is not closing instead gets rendered horizontally
- All dropdown rows open on click
- How to open/close single dropdown menu
- How can I make this dropdown show all of the fifty states instead of "option #"
- JavaScript React Front-End: Opening one collapse button, all collapse buttons open instead of just the one
- Is there any downside to using .tsx instead of .ts all the times in typescript?
- How to get selected value of a dropdown menu in ReactJS
More Query from same tag
- Trying to follow an AJAX React tutorial with axios
- Doesn't useEffect run after the component is rendered?
- Express.js, getting 404 (Not Found) error for my newly added route
- How can I get other fields from relation model?
- How to generate and serve favicons with Webpack?
- Using ref functions with Flow -- property cannot be accessed on possibly undefined value
- How to set serial number in Antd Table for each row when we use pagination
- Reactjs, redux authorization logout issue
- Compare JSON values from separate arrays in ReactJS
- How to dispatch action from async.queue in react redux?
- "Cannot read property 'node' of undefined" - Gatsby/GraphQL/Prismic
- When updating state from props, why useEffect() instead of checking directly in the component?
- Unable to send "Unauthorized" in http header from Spring Boot filter
- Is it possible to combine 'px' and 'vh' into the height of 1 component in react js
- Passing data from Child functional component to parent - React/Typescript
- Return an object inside useEffect() and access it outside in React (after having assigned a state)
- How to render a component using a conditional statement in reactjs?
- How to add sass to webpack + react?
- JavaScript function syntax in Next.js / JSX?
- UI framework vs Styled-components to make UI from scratch in React?
- When Reactjs has functional component as parent and child component as class
- trying to conditionally style a react component but the style isn't applying
- React PWA with workbox PWA
- Make a new div element for each element in an array with JSX?
- React, how to pass product id to details page with React Router Dom?
- How to completely hide Link React component?
- Modify React Child Component props after render
- changing state of a child component (css properties)
- How to I resolve iFrame not scrolling on IOS/iphone?
- material-ui component style customization – change color of select component to white