How to use useState Hook in NextJs for multiple dropdown menu?

user_8710338 0
Viewed 960

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:-

Output

react-hooks next.js reactjs javascript
2 Answers

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

user_70790250

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});
user_88031940
Related