I am using https://www.npmjs.com/package/@szhsin/react-menu
have installed it and it displays a menu.
However, when I click on the menu item I am getting undefined for e.value
Console Output when I open the menu, hover over the submenu, and click on menu item 1
[MenuItem1] undefined clicked
[SubMenu] undefined clicked
[ControlledMenu] undefined clicked
Here is the relevant package.json stuff
"@szhsin/react-menu": "^4.3.0",
Here are the relevant imports
import { ControlledMenu, MenuItem, SubMenu, useHover, useMenuState } from '@szhsin/react-menu';
import '@szhsin/react-menu/dist/index.css';
import '@szhsin/react-menu/dist/transitions/zoom.css';
Here is the code
const ref = useRef(null);
const [isOpen, setOpen] = useState(false);
const [menuState, toggle] = useMenuState({ transition: true });
const { anchorProps, hoverProps } = useHover(isOpen, setOpen);
const getProductMenu = () => {
return (
<>
<div className="my-menu" ref={ref} {...anchorProps}>
Products
</div>
<ControlledMenu
className="sub-menu"
{...hoverProps}
{...menuState}
state={isOpen ? 'open' : 'closed'}
anchorRef={ref}
onClose={() => setOpen(false)}
onClick={(e) => console.log(`[ControlledMenu] ${e.value} clicked`)}
>
<MenuItem className={menuItemClassName} onClick={(e) => console.log(`[MenuItem] ${e.value} clicked`)}>
Single
</MenuItem>
<SubMenu onClick={(e) => console.log(`[SubMenu] ${e.value} clicked`)} className="sub-menu" label={<div className={menuItemClassName}>Sub Menu</div>}>
<MenuItem onClick={(e) => console.log(`[MenuItem1] ${e.value} clicked`)} className={menuItemClassName}>
1
</MenuItem>
</SubMenu>
</ControlledMenu>
</>
);
};
thanks to Phil, add a value
to each menu item
<MenuItem
value="1"
onClick={(e) => console.log(`[MenuItem1] ${e.value} clicked`)}
className={menuItemClassName}
>