title: Toggle only the menu clicked in Reactjs
body: <p>I am making a menu and submenus using <code>recursion function</code> and I am in the need of help to open only the respective menu and sub menu's..</p>
  
  <p>For button and collapse <a href="https://reactstrap.github.io/" rel="nofollow noreferrer">Reactstrap</a> has been used..</p>
  
  <p><strong>Recursive function that did menu population</strong>:</p>
  
  <pre><code>{this.state.menuItems &amp;&amp;
            this.state.menuItems.map((item, index) =&gt; {
              return (
                &lt;div key={item.id}&gt;
                  &lt;Button onClick={this.toggle.bind(this)}&gt; {item.name} &lt;/Button&gt;
                  &lt;Collapse isOpen={this.state.isToggleOpen}&gt;
                    {this.buildMenu(item.children)}
                  &lt;/Collapse&gt;
                &lt;/div&gt;
              );
            })}
  </code></pre>
  
  <p>And the <code>buildMenu</code> function as follows,</p>
  
  <pre><code>  buildMenu(items) {
      return (
        &lt;ul&gt;
          {items &amp;&amp;
            items.map(item =&gt; (
              &lt;li key={item.id}&gt;
                &lt;div&gt;
                  {this.state.isToggleOpen}
                  &lt;Button onClick={this.toggle.bind(this)}&gt; {item.name} &lt;/Button&gt;
                  &lt;Collapse isOpen={this.state.isToggleOpen}&gt;
                    {item.children &amp;&amp; item.children.length &gt; 0
                      ? this.buildMenu(item.children)
                      : null}
                  &lt;/Collapse&gt;
                &lt;/div&gt;
              &lt;/li&gt;
            ))}
        &lt;/ul&gt;
      );
    }
  </code></pre>
  
  <p>There is no problem with the code as of now but I am in the need of help to make <code>menu -&gt; submenu -&gt; submenu</code> step by step open and closing respective levels.</p>
  
  <p>Working example: <a href="https://codesandbox.io/s/reactstrap-accordion-9epsp" rel="nofollow noreferrer"><strong>https://codesandbox.io/s/reactstrap-accordion-9epsp</strong></a></p>
  
  <p>You can take a look at this example that when you click on any menu the whole level of menus gets opened instead of clicked one.. </p>
  
  <p><strong>Requirement</strong> </p>
  
  <p>If user clicked on menu <code>One</code>, then the submenu (children)</p>
  
  <pre><code>-&gt; One-One 
  </code></pre>
  
  <p>needs to get opened. </p>
  
  <p>And then if user clicked on <code>One-One</code>,</p>
  
  <pre><code> -&gt;   One-One-One
   -&gt;   One - one - two
   -&gt;   One - one - three
  </code></pre>
  
  <p>needs to get opened.</p>
  
  <p>Likewise it is nested so after click on any menu/ children their respective next level needs to get opened.</p>
  
  <p>I am new in react and reactstrap way of design , So any help from expertise would be useful for me to proceed and learn how actually it needs to be done.</p>