Dropdown menu - disappear after clicking on item - reactjs

Question

I'm trying to create "dropdown menu" in React. I've used useState inside functions in onMouseEnter and onMouseLeave events (in dropdown-holder-us div / NaviMain), to toggle display of "dropdown menu". Last thing is to make "dropdown menu" disappear , when clicking on DropdownMenuItem. Could someone hint me how to achieve this?
App.js
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import NaviMain from "./components/NaviMain";
import Info from "./pages/Info";
import VerticalAlign from "./pages/VerticalAlign";
import Flexbox from "./pages/Flexbox";
function App() {
return (
<Router>
<div className="App">
<NaviMain />
<Routes>
<Route path="/" element={<Info />} />
<Route path="/verticalalign" element={<VerticalAlign />} />
<Route path="/flexbox" element={<Flexbox/>} />
</Routes>
</div>
</Router>
);
}
export default App;
NaviMain.js
import { useState } from "react"
import DropdownMenuItem from "./sub-components/DropdownMenuItem"
const NaviMain = () => {
const [disp, setDisp] = useState("hide-menu");
const hoverOn = () => {
setDisp("show-menu")
}
const hoverOff = () => {
setDisp("hide-menu")
}
return (
<nav>
<ul">
<li onMouseEnter={hoverOn} onMouseLeave={hoverOff}>
<a className="hover-pointer">school</a>
<div className={`dropdown-holder-us ${disp}`}>
<DropdownMenuItem title="v align" link={"/verticalAlign"}/>
<DropdownMenuItem title="flexbox" link={"/flexbox"} />
</div>
</li>
</ul>
</nav>
)
}
export default NaviMain
DropdownMenuItem.js
import { Link } from "react-router-dom";
const DropdownMenuItem = ({title , link}) => {
return (
<>
<Link to={link}">
{title}
</Link>
</>
)
}
export default DropdownMenuItem

Answer 1

I think easiest solution is to make disp a boolean which decides whether the dropdown menu is shown or not. I have shortened the dropdown menu to a <DropdownMenu> component for better legibility (you might want to do this in your code to, might be easier to maintain).
const NaviMain = () => {
const [display, setDisplay] = useState(false);
const hoverOn = () => {
setDisplay(true)
}
const hoverOff = () => {
setDisplay(false)
}
return (
<nav>
<ul">
<li onMouseEnter={hoverOn} onMouseLeave={hoverOff}>
<a className="hover-pointer">school</a>
{
display ? <DropdownMenu / >
}
</li>
</ul>
</nav>
)
}
If it is difficult to make dropdown menu appear and disappear like this,
another way to make it work is to attach disp to a css class which decides if DropdownMenu is display: block or display: none.

Answer 2

After rebuilding NaviMain.js (like #cSharp suggested in his answer), Ive created separate components DropdownMenu (containing logic) and MenuItemContentSchool (with content). So the "hover" effect, managed by mouse evenets, is in li - which is a parent for "DropdownMenu". And the desired disappearance of "DropdownMenu" is managed by click event, inside the container div. Quite simple, inspired by Brian Design video.
NaviMain.js
import { useState } from "react"
import DropdownMenu from "./DropdownMenu";
const NaviMain = () => {
const [disp, setDisp] = useState(false);
const hoverOn = () => setDisp(true)
const hoverOff = () => setDisp(false)
return (
<nav>
<ul>
<li className= onMouseEnter={hoverOn} onMouseLeave={hoverOff}>
<a>school</a>
{ disp && <DropdownMenu /> }
</li>
</ul>
</nav>
)
}
export default NaviMain
DropdownMenu
import { useState } from "react"
import { MenuItemContentSchool } from "./sub-components/MenuItemContentSchool"
import { Link } from "react-router-dom";
const DropdownMenu = ( {disp} ) => {
const [click, setClick] = useState("")
const handleClick = () => {
setClick("hide-menu")
}
return (
<div className={`dropdown-holder-us ${disp} ${click}`}>
{MenuItemContentSchool.map((item, index) => {
return (
<Link to={item.link} className="d-content-us" onClick={handleClick}>
{item.title}
</Link>
)
} )}
</div>
)
}
export default DropdownMenu
MenuItemContentSchool
export const MenuItemContentSchool = [
{
title:"v align",
link:"/verticalAlign"
},
{
title:"flexbox",
link:"/flexbox"
}
]