I have a navigation menu and I would like to change the style of the element that is selected from the list in the navigation menu. I am using React with the Grid element from material-ui.
NavigationMenu.tsx:
import React, { useState, useEffect } from "react";
import { Grid } from "@material-ui/core";
import './NavigationMenu.css';
import history from '../../history';
const NavigationMenu = () => {
const [itemStyle, setItemStyle] = useState("nav-item");
useEffect(() => {
window.addEventListener('click', handleSelectedItem);
});
const handleSelectedItem = (event: any) => {
setItemStyle("nav-item");
event.target.classList.add("selected");
const selectedItem = event.target.id;
history.push('/GeneralPage/' + selectedItem);
}
return (
<div className="navigation-menu">
<Grid container direction="column" justify="center" alignItems="center" spacing={2}>
<Grid item id="Books"
className={itemStyle}>
Books Management
</Grid>
<Grid item id="Authors"
className={itemStyle}>
Authors Management
</Grid>
<Grid item id="Users"
className={itemStyle}>
Users Management
</Grid>
</Grid>
</div>
);
}
export default NavigationMenu;
NavigationMenu.css:
.nav-item {
cursor: pointer;
text-align: center;
background-color: none;
width: 100%;
}
.selected{
background-color: hotpink;
}
I am looking to update the style of the selected element by applying the "selected" class. How can I achieve this?