Currently, in my navigation bar, I am attempting to make only the active or clicked list item appear bold when clicked. At the moment, I can successfully achieve this effect; however, when I click on other list items, they also become bolded, while the originally clicked item does not revert back to its normal state. I am unsure of how to implement logic that would allow me to keep an item bolded only when it is clicked, and return it to its original state when not clicked. Are there any suggestions for checking the "false" condition or perhaps a better approach I could take?
Below is the code snippet for my Navlist component (which represents the list of list items):
export class Navitem extends React.Component<INavitem, IState> {
constructor(props){
super(props);
this.state = {
bolded: false
};
}
makeBold = () => {
this.setState({
bolded: true
})
};
render() {
return (
<Link to={this.props.tolink} >
<li className={this.state.bolded ? "bolded" : ""}onClick={this.makeBold}>{this.props.name}</li>
</Link>
);
}
}
And here is the code for my navbar:
const Navbar: React.FC<{}> = props => {
return (
<nav>
<div id='nav-name'>
<h1>Matthew Fang</h1>
</div>
<div id='nav-space'>
<Navitem name="Home" tolink="/" ></Navitem>
<Navitem name="About Me" tolink="/about" ></Navitem>
<Navitem name="Projects" tolink="/projects" ></Navitem>
<Navitem name="Contact Me" tolink="/contact" ></Navitem>
</div>
</nav>
);
}
Finally, here is the CSS style definition that applies the bold formatting to the clicked list item:
.bolded
{
font-weight: bolder;
}