Creating Submenus I find that when opening one of them all the others open and when closing it in the same way they all close.
This is my code:
const DashBoard = () => {
const [showDropdown, setShowDropdown] = useState(false)
return (
<>
<div>
<div>
<div>
<img
src={ Logo }
alt= "LOGO"
/>
</div>
<div>
<ul>
<li>
<div
onClick={ () => setShowDropdown(!showDropdown) }
>
<FiHome />
Submenu 1
</div>
{ showDropdown &&
(
<div>
<ul>
<li>Test</li>
<li >Test</li>
</ul>
</div>
)
}
</li>
</ul>
</div>
<div>
<ul>
<li className='group'>
<div
onClick={ () => setShowDropdown(!showDropdown) }
>
<FiHome />
Submenu 2
</div>
{ showDropdown &&
(
<div>
<ul>
<li>Test</li>
<li >Test</li>
</ul>
</div>
)
}
</li>
</ul>
</div>
</div>
<div>
<main>Main Content</main>
</div>
</div>
</>
)
}
How could I achieve that when opening a submenu the others are closed? I have reviewed that indicating an ID per submenu is possible but I don’t know if it is the best way. Thanks.