How can I set conditional class on the selected element in react, toggle will not work

Question

I have this dropdown menu, I want if my menu has arrow class before ul then If I click on that parent li menu it will add a class on that li which is showMenu only that sub-menu.

this is the code:

 <ul className="nav-links" >
                    <li>
                        <a href="#">
                            <i className='bx bx-grid-alt'></i>
                            <span className="link_name">Dashboard</span>
                        </a>
                        <ul className="sub-menu blank">
                            <li><a className="link_name" href="#">Category</a></li>
                        </ul>
                    </li>
                    <li onClick={subMenuToggle} className={`${subMenu ? 'showMenu' : ''}`}> // sub menu parent
                        <div className="iocn-link">
                            <a href="#">
                                <i className='bx bx-collection'></i>
                                <span className="link_name">Category</span>
                            </a>
                            <i className='bx bxs-chevron-down arrow'></i> // arrow class
                        </div>
                        <ul className="sub-menu">
                            <li><a className="link_name" href="#">Category</a></li>
                            <li><a href="#">HTML & CSS</a></li>
                            <li><a href="#">JavaScript</a></li>
                            <li><a href="#">PHP & MySQL</a></li>
                        </ul>
                    </li>
                    <li onClick={subMenuToggle} className={`${subMenu ? 'showMenu' : ''}`}>// sub menu parent
                        <div className="iocn-link">
                            <a href="#">
                                <i className='bx bx-book-alt'></i>
                                <span className="link_name">Posts</span>
                            </a>
                            <i className='bx bxs-chevron-down arrow'></i> // arrow class
                        </div>
                        <ul className="sub-menu">
                            <li><a className="link_name" href="#">Posts</a></li>
                            <li><a href="#">Web Design</a></li>
                            <li><a href="#">Login Form</a></li>
                            <li><a href="#">Card Design</a></li>
                        </ul>
                    </li>
</ul>

I tried this way set on click handler subMenuToggle into the parent submenu li if anyone clicks on that li it will set true and It will add a class 'subMenu' but when I click any sub menu parent item it becomes true and opens all the sub-menus I have.

 const [subMenu, setSubMenu] = useState(false)
    const subMenuToggle = () => {
        setSubMenu(!subMenu)
    }

Can anyone help me please?

Answer 1

I think you are doing it wrong. you dont need that subMenu state, just use classList of the current target element that is clicked on.

const subMenuToggle = (e)=>{
  e.currentTarget.classList.toggle('showMenu');
}

and your li should be like this:

/* you can provide any default className that 
this element must have beside that showMenu that you provide dynamically
*/
<li onClick={subMenuToggle} className=""> // sub menu parent
   <div className="iocn-link">
      <a href="#">
        <i className='bx bx-collection'></i>
          <span className="link_name">Category</span>
      </a>
      <i className='bx bxs-chevron-down arrow'></i> // arrow class
   </div>
   <ul className="sub-menu">
     <li><a className="link_name" href="#">Category</a></li>
     <li><a href="#">HTML & CSS</a></li>
     <li><a href="#">JavaScript</a></li>
     <li><a href="#">PHP & MySQL</a></li>
   </ul>
</li>