Soy nuevo en react y creando una App me encuentro con este error, que no se realmente cuál es y porqué ocurre. Espero alguien pueda ayudarme.
Este es el error:
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.
Este es el código:
https://codepen.io/dacame77/pen/oNWLEdW?editors=1010
import React from 'react'
import { makeStyles } from '@material-ui/core/styles';
import {
Typography,
IconButton,
Toolbar,
AppBar,
Badge,
SwipeableDrawer,
List,
Divider,
ListItem,
ListItemIcon,
ListItemText,
} from '@material-ui/core';
import MenuIcon from '@material-ui/icons/Menu';
import {Notifications, Inbox, Mail }from '@material-ui/icons';
import { Link, withRouter } from 'react-router-dom';
import clsx from 'clsx';
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
menuButton: {
marginRight: theme.spacing(2),
},
title: {
flexGrow: 1,
},
notifications:{
marginRight: 18,
},
list: {
width: 250,
},
fullList: {
width: 'auto',
},
}));
const Navbar = () => {
const classes = useStyles();
const [state, setState] = React.useState({
left: false,
});
const toggleDrawer = (anchor, open) => (event) => {
if (
event &&
event.type === "keydown" &&
(event.key === "Tab" || event.key === "Shift")
) {
return;
}
setState({ ...state, [anchor]: open });
};
const list = (anchor) => (
<div
className={clsx(classes.list)}
role="presentation"
onClick={toggleDrawer(anchor, false)}
onKeyDown={toggleDrawer(anchor, false)}
>
<List>
{["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>
{index % 2 === 0 ? <Inbox /> : <Mail />}
</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
<Divider />
<List>
{["All mail", "Trash", "Spam"].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>
{index % 2 === 0 ? <Inbox /> : <Mail />}
</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
</div>
);
return (
<>
<div className={classes.root}>
<AppBar position="static" color="secondary">
<Toolbar>
<Typography variant="h6" className={classes.title}>
LOGO
</Typography>
<div className="appbar--links">
<div className="border">
<Link to="/">Inicio</Link>
</div>
<div className="border">
<Link to="Categorias">Categorias</Link>
</div>
<div className="border">
<Link to="Publicar-servicio">Publicar Servicio</Link>
</div>
<div className="border">
<Link to="Contacto">Contactanos</Link>
</div>
<div className="border">
<Link to="Login">iniciar sesion</Link>
</div>
</div>
<IconButton>
<Badge color="error" badgeContent={3} className={classes.notifications}>
<Notifications color="primary"/>
</Badge>
</IconButton>
<div className="icon--menu">
<div>
{["left"].map((anchor) => (
<React.Fragment key={anchor}>
<SwipeableDrawer anchor={anchor} open={state[anchor]} onClose={toggleDrawer(anchor,
false)} onOpen={toggleDrawer(anchor, true)}>
{list(anchor)}
</SwipeableDrawer>
<IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu"
onClick={toggleDrawer(anchor, true)}>
<MenuIcon />
</IconButton>
</React.Fragment>
))}
</div>
</div>
</Toolbar>
</AppBar>
</div>
</>
)
}
export default withRouter(Navbar);