I am trying to create an admin panel and in which I have a sidebar menu. I have created a dropdown menu and it's working using the useState hook but not working as I wanted. What I wanted is when I click on Clients so if statement should only run for its children only not for all sibling children.
const [isActive, setIsActive] = useState(false);
const handleToggle = () => {
setIsActive(!isActive)
}
Below is the dropdown code.
<li>
<a className={`${isActive?'open-sibling':'hidden-sibling'} left-menu-list`} onClick={handleToggle}>
<i className="las la-user-alt mr-2"></i>
<span>Clients</span>
<i className="las la-angle-up ml-auto"></i>
</a>
<ul>
<Link href="/clients/list">
<li>
<a className="left-menu-list">
<i className="las la-users mr-2"></i> View All Clients
</a>
</li>
</Link>
</ul>
</li>
Please find the GIF of the output:-
Here you go with a solution
const [isActive, setIsActive] = useState({
status: false,
key: ""
});
const handleToggle = (key) => {
if(isActive.key === key) {
setIsActive({
status: false,
key: ""
});
} else {
setIsActive({
status: true,
key
});
}
}<li>
<a className={`${isActive.key == 'client' ? 'open-sibling':'hidden-sibling'} left-menu-list`} onClick={() => handleToggle("client")}>
<i className="las la-user-alt mr-2"></i>
<span>Clients</span>
<i className="las la-angle-up ml-auto"></i>
</a>
<ul>
<Link href="/clients/list">
<li>
<a className="left-menu-list">
<i className="las la-users mr-2"></i> View All Clients
</a>
</li>
</Link>
</ul>
</li>Please use the status and key to view the children elements
As per this comment,
This is the expected behaviour if same state is used for all dropdowns. See if you can use separate state for each menu. Like,
const [isClientActive, setIsClientActive] = useState(false);
const [isordersActive, setIsOrdersActive] = useState(false);
const handleClientToggle = () => {
setIsClientActive(!isClientActive)
}
const handleOrdersToggle = () => {
setIsOrdersActive(!isordersActive)
}
or use an object to store in one place
const [isActive, setIsActive] = useState({client: false, order:false});