React JS Navigation Bar - reactjs

Question

App.js
import NewsSec from "./News/NewsSec";
import ScoreSec from "./ScoreSec/ScoreSec";
import Menu from "./Sidebar/Menu";
import "./styles.css";
import { GiHamburgerMenu } from "react-icons/gi";
import React, { useState } from "react";
export default function App() {
const [showMediaIcons, setShowMediaIcons] = useState(false);
return (
<div className="App">
<div className="head">
<div className="navicon">
<a
href="/"
onClick={() => {
setShowMediaIcons(!showMediaIcons);
}}
>
<GiHamburgerMenu />{" "}
</a>
</div>
<div className="logo">Project</div>
<div className="weather">weather section</div>
</div>
<div className="main">
<div className="nav-section">
<Menu classes={showMediaIcons ? "mobile-view navbar" : "navbar"} />
</div>
<div className="news-section">
<NewsSec />
</div>
<div className="score-section">
<ScoreSec />
</div>
</div>
</div>
);
Menu.js
import React from "react";
import "./Navbar.css";
const Menu = (props) => {
return (
<>
<div className={props.classes}>
<ul>
<li>Home</li>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
<li>About</li>
</ul>
</div>
</>
);
};
export default Menu;
i was trying to make a responsive navigation bar. the navigation bar is actually a sidebar. i used the props to pass the 'className' from App.js to Menu.js because i called the function in App.js
For testing, I tried changing the nav colour to Red. But on clicking Hamburger icon, the colour changes to Red and changed back to normal automatically. Please help folks

Answer 1

It seems that a might be reloading the page with href="/", resetting the state showMediaIcons to its initial value of false.
If the purpose of GiHamburgerMenu is to toggle display for Menu, it might not need to be wrapped in a, instead try add the onClick on the icon or on the wrapping div:
<div className="navicon">
<GiHamburgerMenu
onClick={() => {
setShowMediaIcons((prev) => !prev);
}}
/>
</div>