reactjsmenu

How can I get the React-Menu e.Value


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>
      </>
    );
  };

Solution

  • thanks to Phil, add a value to each menu item

                <MenuItem
                  value="1"
                  onClick={(e) => console.log(`[MenuItem1] ${e.value} clicked`)}
                  className={menuItemClassName}
                >