title: Close previous sub-menu and show clicked sub-menu with single click in ReactJS
body: <p>I am using the code below for the side navigation menu. Each Navigation Item has sub-navigation items.</p>
  <p><strong>Current Behavior</strong></p>
  <ul>
  <li><p>The Sub-navigation item does open on click but when clicked the next navigation heading, it closes the current sub-menu and requires 2nd click to open the required sub-menu. which means the user has to click twice to open the sub-menu of the desired sub-menu as click one closes the previous sub-menu and then click 2 to open the required sub-menu.</p>
  </li>
  <li><p>Upon clicking the sub-menu item, the whole sub-menu get closed</p>
  </li>
  </ul>
  <p><strong>Required Behaviour</strong></p>
  <ul>
  <li>By Default Networking Sub-menu should open unless the user clicks another navigation heading.</li>
  <li>When the user clicks on one of the sub-menu items, the clicked heading and sub-menu should remain open.</li>
  <li>The sub-menu should open with a single click and close the other sub-menu that is opened.</li>
  </ul>
  <h2>Code</h2>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import { NavLink } from &quot;react-router-dom&quot;;
  import userImage from &quot;../../global/assets/img/avatar.png&quot;;
  import { RiSettings2Line } from &quot;react-icons/ri&quot;;
  
  export const AppSideNav = () =&gt; {
    const [open, setOpen] = useState(&quot;networking&quot;);
    const navDetails = [
      {
        navId: 1,
        navHead: &quot;Networking&quot;,
        subNavItems: [&quot;item 1&quot;, &quot;item 2&quot;],
        navLink: &quot;networking&quot;,
      },
      {
        navId: 2,
        navHead: &quot;Trading&quot;,
        subNavItems: [&quot;item 1&quot;, &quot;item 2&quot;],
        navLink: &quot;trading&quot;,
      },
    ];
  
    const toggle = (id) =&gt; setOpen(open === id ? undefined : id);
  
    const subNavFunction = (navLink, subNavVal) =&gt; {
      return `/${navLink}/` + `${subNavVal.toLowerCase()}`;
    };
  
    return (
      &lt;div className=&quot;AppSideNavContentContainer&quot;&gt;
        &lt;div className=&quot;AppSideNavContentTop&quot;&gt;
          &lt;div className=&quot;AppSideNavContentTopWrapper&quot;&gt;
            &lt;div className=&quot;AppSideNavUserPicContainer&quot;&gt;
              &lt;div className=&quot;AppSideNavUserPic&quot;&gt;
                &lt;img src={userImage} alt=&quot;user-avatar&quot; className=&quot;UserAvatar&quot; /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div className=&quot;AppSideNavUserNameContainer&quot;&gt;
              &lt;div className=&quot;AppSideNavUserName&quot;&gt;
                &lt;div className=&quot;AppSideNavUserNameText&quot;&gt; Username&lt;/div&gt;
              &lt;/div&gt;
              &lt;div className=&quot;AppSideNavUserWalletId&quot;&gt; 0x99343&lt;/div&gt;
            &lt;/div&gt;
            &lt;div className=&quot;AppSideNavUserDdIconContainer&quot;&gt;
              &lt;button className=&quot;AppSideNavUserDdIconContainerWrapper&quot;&gt;
                &lt;div className=&quot;AppSideNavUserDdIconInner&quot;&gt;
                  &lt;RiSettings2Line /&gt;
                &lt;/div&gt;
              &lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div className=&quot;AppSideNavContentBody&quot;&gt;
          &lt;div className=&quot;SideAppNavBodySection&quot;&gt;
            &lt;div className=&quot;SideAppNavLinkWrapper&quot;&gt;
              &lt;ul className=&quot;SideNavHomeList&quot;&gt;
                {navDetails.map((items) =&gt; (
                  &lt;NavLink
                    to={
                      items.navHead === &quot;Networking&quot;
                        ? &quot;/networking&quot;
                        : items.navHead === &quot;Trading&quot;
                        ? &quot;/trading&quot;
                        : items.navHead === &quot;Staking &amp; Mining&quot;
                        ? &quot;/staking&quot;
                        : items.navHead === &quot;Smart Wallet&quot;
                        ? &quot;/wallet&quot;
                        : items.navHead === &quot;IDO List&quot;
                        ? &quot;ido&quot;
                        : &quot;&quot;
                    }
                    className=&quot;SideNavLinkContainer&quot;
                  &gt;
                    &lt;div
                      className=&quot;OverFlowHidden&quot;
                      onClick={() =&gt; toggle(items.navId)}
                    &gt;
                      &lt;div className=&quot;SideNavLinkItemContainer&quot;&gt;
                        &lt;div className=&quot;SideNavLinkItemContainerWrapper&quot;&gt;
                          &lt;div className=&quot;SideNavLinkItemContainerInner&quot;&gt;
                            &lt;div className=&quot;SideNavLinkItemContainerInnerWrapper&quot;&gt;
                              &lt;span
                                className={
                                  items.navHead === &quot;Networking&quot;
                                    ? &quot;SideNavLinkIcon PortfolioIcon&quot;
                                    : items.navHead === &quot;Trading&quot;
                                    ? &quot;SideNavLinkIcon TradingIcon&quot;
                                    : items.navHead === &quot;Staking &amp; Mining&quot;
                                    ? &quot;SideNavLinkIcon StakingIcon&quot;
                                    : items.navHead === &quot;Smart Wallet&quot;
                                    ? &quot;SideNavLinkIcon WalletIcon&quot;
                                    : &quot;SideNavLinkIcon LaunchIcon&quot;
                                }
                              &gt;
                                {&quot; &quot;}
                              &lt;/span&gt;
                            &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;span className=&quot;SideNavLinkText&quot;&gt;
                            {&quot; &quot;}
                            {items.navHead}{&quot; &quot;}
                          &lt;/span&gt;
                        &lt;/div&gt;
                        {open === items.navId &amp;&amp; (
                          &lt;div className=&quot;SideNavLinkSubItemsContainer&quot;&gt;
                            &lt;div className=&quot;SideNavLinkSubItemsWrapper&quot;&gt;
                              &lt;div&gt;
                                &lt;span className=&quot;SideNavLinkSubItem&quot;&gt;
                                  {&quot; &quot;}
                                  {items.subNavItems.map((navItem) =&gt; (
                                    &lt;NavLink
                                      to={subNavFunction(items.navLink, navItem)}
                                    &gt;
                                      &lt;div className=&quot;SideNavLinkSubItemInner&quot;&gt;
                                        &lt;span className=&quot;SideNavLinkSubItem&quot;&gt;
                                          {&quot; &quot;}
                                          {navItem}
                                        &lt;/span&gt;
                                      &lt;/div&gt;
                                    &lt;/NavLink&gt;
                                  ))}
                                &lt;/span&gt;
                              &lt;/div&gt;
                            &lt;/div&gt;
                          &lt;/div&gt;
                        )}
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/NavLink&gt;
                ))}
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>