I have submenu that is working for only when there is single item single LI but if I increase LI then its not working fine. How can I solve this?
My Code:-
import React, { useState } from "react";
import { Link } from "react-router-dom";
const Home = (props) => {
const [subMenuOpen, setSubMenuOpen] = useState(false);
return (
<>
<ul className="submenu">
<li>
<Link to="/">
<div
onClick={() => setSubMenuOpen(!subMenuOpen)}
>
<span>test</span>
</div>
</Link>
<ul class={`sub-menu ${subMenuOpen ? "is-open" : ""}`}>
<li className="menu-item">Sub-Item 1</li>
<li className="menu-item">Sub-Item 2</li>
<li className="menu-item">Sub-Item 3</li>
</ul>
</li>
<li>
<Link to="/">
<div
onClick={() => setSubMenuOpen(!subMenuOpen)}
>
<span>test</span>
</div>
</Link>
<ul class={`sub-menu ${subMenuOpen ? "is-open" : ""}`}>
<li className="menu-item">Sub-Item 1</li>
<li className="menu-item">Sub-Item 2</li>
<li className="menu-item">Sub-Item 3</li>
</ul>
</li>
</ul>
</>
);
};
export default Home;.sub-menu { display: none;}
.sub-menu.is-open { display:block;}ThankYou!
Because you have multiple submenus, you need to keep track of which one is open, and you can't do that with a single bool value.
If you will have only 1 level of child menu items, and at most one of them can be open, you can use a number: -1 -> no subitem is open, 0 -> the first item is open, etc. like this:
const [subMenuOpen, setSubMenuOpen] = useState(-1);<div onClick={() => setSubMenuOpen(0)}><div onClick={() => setSubMenuOpen(1)}><ul class={`sub-menu ${subMenuOpen === 0 ? "is-open" : ""}`}><ul class={`sub-menu ${subMenuOpen === 1 ? "is-open" : ""}`}>setSubMenuOpen(-1).To get toggling behaviour, you can use a helper function like this:
const toggleMenu = (x) => setSubMenuOpen(subMenuOpen === x ? -1 : x)<div onClick={() => toggleMenu(0)}><div onClick={() => toggleMenu(1)}>If you plan to have multiple levels of menu items, then a tree-like data structure will be more suitable, perhaps to both define the menu and to keep track of the open (sub)(sub)(sub)item.
try using "className" instead of "class" JSX seems to be right I think you have a problem in css