title: How can I set conditional class on the selected element in react, toggle will not work
body: <p>I have this dropdown menu, I want if my menu has <code>arrow</code> class before <code>ul</code> then If I click on that parent li menu it will add a class on that li which is <code>showMenu</code> only that sub-menu.</p>
  <p>this is the code:</p>
  <pre><code> &lt;ul className=&quot;nav-links&quot; &gt;
                      &lt;li&gt;
                          &lt;a href=&quot;#&quot;&gt;
                              &lt;i className='bx bx-grid-alt'&gt;&lt;/i&gt;
                              &lt;span className=&quot;link_name&quot;&gt;Dashboard&lt;/span&gt;
                          &lt;/a&gt;
                          &lt;ul className=&quot;sub-menu blank&quot;&gt;
                              &lt;li&gt;&lt;a className=&quot;link_name&quot; href=&quot;#&quot;&gt;Category&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li onClick={subMenuToggle} className={`${subMenu ? 'showMenu' : ''}`}&gt; // sub menu parent
                          &lt;div className=&quot;iocn-link&quot;&gt;
                              &lt;a href=&quot;#&quot;&gt;
                                  &lt;i className='bx bx-collection'&gt;&lt;/i&gt;
                                  &lt;span className=&quot;link_name&quot;&gt;Category&lt;/span&gt;
                              &lt;/a&gt;
                              &lt;i className='bx bxs-chevron-down arrow'&gt;&lt;/i&gt; // arrow class
                          &lt;/div&gt;
                          &lt;ul className=&quot;sub-menu&quot;&gt;
                              &lt;li&gt;&lt;a className=&quot;link_name&quot; href=&quot;#&quot;&gt;Category&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;HTML &amp; CSS&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;JavaScript&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;PHP &amp; MySQL&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li onClick={subMenuToggle} className={`${subMenu ? 'showMenu' : ''}`}&gt;// sub menu parent
                          &lt;div className=&quot;iocn-link&quot;&gt;
                              &lt;a href=&quot;#&quot;&gt;
                                  &lt;i className='bx bx-book-alt'&gt;&lt;/i&gt;
                                  &lt;span className=&quot;link_name&quot;&gt;Posts&lt;/span&gt;
                              &lt;/a&gt;
                              &lt;i className='bx bxs-chevron-down arrow'&gt;&lt;/i&gt; // arrow class
                          &lt;/div&gt;
                          &lt;ul className=&quot;sub-menu&quot;&gt;
                              &lt;li&gt;&lt;a className=&quot;link_name&quot; href=&quot;#&quot;&gt;Posts&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Web Design&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Login Form&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Card Design&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  <p>I tried this way set on click handler <code>subMenuToggle</code> 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.</p>
  <pre><code> const [subMenu, setSubMenu] = useState(false)
      const subMenuToggle = () =&gt; {
          setSubMenu(!subMenu)
      }
  </code></pre>
  <p>Can anyone help me please?</p>