I am facing a challenge in styling the ListItem on hover. The issue arises when the list is dynamically generated, causing all list items to change style simultaneously when hovered over. How can I target only one element for styling? Below is the code snippet where I am attempting to style the prop.icon and ListItemText upon hover.
Sidebar.js
var links = (
<List className={classes.list}>
{routes.map((prop, key) => {
if (prop.path === "/login") {
return;
}
return (
<NavLink
to={prop.layout + prop.path}
className={classes.item}
activeClassName="active"
key={key}
>
<ListItem button className={classes.itemLink} onMouseEnter={MouseEnter} onMouseLeave={MouseLeave}>
<prop.icon
className={classNames(classes.itemIcon)}
/>
<ListItemText
primary={prop.name}
className={classNames(classes.itemText)}
disableTypography={true}
/>
</ListItem>
</NavLink>
);
})}
</List>
);MouseEnter & MouseLeave
const MouseEnter = (e) => {
setHovered(true);
}
const MouseLeave = (e) => {
setHovered(false);
}