React-admin MenuItemLink onClick not working

Question

I've got react-admin v3 running very smoothly, but I'm struggling with one point.

I've got a custom user menu component set up as below, but the handleClick event isn't called at all - nothing in the console, and no window opening. Instead, the browser navigates to /billing

render() {
        const { crudGetOne, profile, ...props } = this.props;

        const handleClick = (e) => {
            e.preventDefault();
            e.stopPropagation();
            console.log("In usermenu handleClick");
            console.log("Opening window to {process.env.REACT_APP_BILLING_URL}");
            window.open("{process.env.REACT_APP_BILLING_URL}", '_blank');

        }

        return (
            <UserMenu {...props}>
                <MenuItemLink
                    to="/profile"
                    primaryText="Profile"
                    leftIcon={<AccountCircleIcon />}
                />
                <MenuItemLink
                    to="/billing"
                    primaryText="Billing"
                    leftIcon={<PaymentIcon />}
                    onClick={handleClick}
                    component={Link}
                >Billing</MenuItemLink>
            </UserMenu>
        );
    }

If anyone can help, or suggest another way to have an external link open from the menuitem, that would be fantastic, it's been bugging me for ages. And amazingly, I can't find anyone else asking the same question.

Regards, Andy

score 0 · Answer 1 · answered May 28 '20 at 03:09

The example looks different in the documentation:

const CustomUserMenu = (props) => {
  return (
    <UserMenu {...props}>
      <MenuItemLink
        to="/billing"
        primaryText="Billing"
        leftIcon={<PaymentIcon />}

        onClick={props.onClick} // close the menu on click!
      />
    </UserMenu>
  )
}

This is a bit confusing, but the onClick event is redefined inside UserMenu:

...(cloneElement(menuItem, { onClick: handleClose }))

https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/layout/UserMenu.js

React-admin MenuItemLink onClick not working

1 Answers1