Menu Component "Function components cannot be given refs"

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

When trying to set the anchorEl to a Menu component, I expect it to work fine without warning

Current Behavior 😯

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of ForwardRef(Menu).

Steps to Reproduce 🕹

Link: https://codesandbox.io/embed/createreactapp-bnnxl the warning appear when click it the Home Icon

Your Environment 🌎

Tech	Version
Material-UI	v4.0.1
React	16.8.6
Browser	Chrome v74

[waleedshkt]

I found a simple solution.

Wrap the child functional component with a <div>.

[oliviertassinari]

This is an issue with the NavLink component. This react-router component should forward its ref, it doesn’t yet: https://github.com/ReactTraining/react-router/issues/6056#issuecomment-435524678. I hope https://material-ui.com/guides/composition/#react-router-demo helps to explain why in more details.

I have noticed another issue; you are using the ul > a > li DOM structure. This is not encouraged. You should consider merging the two.

import React from "react";
import { NavLink } from "react-router-dom";
import PropTypes from "prop-types";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import Icon from "@material-ui/core/Icon";

const ForwardNavLink = React.forwardRef((props, ref) => (
  <NavLink {...props} innerRef={ref} />
));

export default const PopupItem = ({ currentTarget, childrenMenu, closePopup }) => (
  <Menu
    anchorEl={currentTarget}
    open={!!currentTarget}
    onClose={closePopup}
  >
    {childrenMenu.map((val, index) => {
      const {
        text: textChildren,
        icon: iconChildren,
        link: linkChildren
      } = val;

      return (
        <MenuItem
          key={`MPU-${index}-${textChildren}`}
          onClick={closePopup}
          className="nested"
          style={{ color: "inherit" }}
          to={linkChildren}
          exact
          activeClassName="active-menu"
          style={{ textDecoration: "none", color: "inherit" }}
          component={ForwardNavLink}
        >
          <ListItemIcon>
            <Icon className="icon material-icons-round">{iconChildren}</Icon>
          </ListItemIcon>
          <ListItemText primary={textChildren} className="text" />
        </MenuItem>
      );
    })}
  </Menu>
);

https://codesandbox.io/s/createreactapp-x6u1h