0

I am trying to use a function as a prop inside a component and this component is a child of another component. The function works but it is giving me a warning. Can I know why. This is the warning I am receiving in the console. Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Can I remove the warning without removing strictmode? This is my code.

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import { makeStyles } from '@material-ui/core/styles';
import { Button, IconButton, Menu, MenuItem } from '@material-ui/core';
import MenuIcon from '@material-ui/icons/Menu';
import ListItemText from '@material-ui/core/ListItemText';
import { Link } from 'react-router-dom';

const StyledMenu = withStyles({
  paper: {
    border: '1px solid #d3d4d5',
  },
})((props) => (
  <Menu
    elevation={0}
    getContentAnchorEl={null}
    anchorOrigin={{
      vertical: 'bottom',
      horizontal: 'center',
    }}
    transformOrigin={{
      vertical: 'top',
      horizontal: 'center',
    }}
    {...props}
  />
));

const StyledMenuItem = withStyles((theme) => ({
  root: {
    '&:focus': {
      backgroundColor: theme.palette.primary.main,
      '& .MuiListItemIcon-root, & .MuiListItemText-primary': {
        color: theme.palette.common.white,
      },
    },
  },
}))(MenuItem);

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  title: {
    flexGrow: 1,
  },
  Link: {
    textDecoration: 'none',
    color: 'black',
  }
}));

export const MenuBox = () => {
  const classes = useStyles();
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div className="menus">
      <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu" onClick={handleClick}>
        <MenuIcon />
      </IconButton>
      <StyledMenu
        id="customized-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <Link to="/" className={classes.Link}>
          <StyledMenuItem>
            <ListItemText>
              Home
            </ListItemText>
          </StyledMenuItem>
        </Link>
        <Link to="about" className={classes.Link}>
          <StyledMenuItem>
            <ListItemText>
              About
            </ListItemText>
          </StyledMenuItem>
        </Link>
        <Link to="products" className={classes.Link}>
          <StyledMenuItem>
            <ListItemText>
              Products
            </ListItemText>
          </StyledMenuItem>
        </Link>
      </StyledMenu>
    </div>
  )
}
Ahmed Abid
  • 23
  • 7

1 Answers1

0

For discussion of the issue, you can find them here #13394 and here #2345 to fix this error you need to either remove strict mode or upgrade to alpha version 5.0.0-alpha.21 @material-ui/core

yarn add @material-ui/core@next

Here I tried to implement your code with a new version and there gave me a difference in dependencies and I had to install them manually, you can see it here

https://codesandbox.io/s/objective-morse-crnm1?file=/src/index.js

arma73
  • 98
  • 7