title: React Web Navbar Tree Menu Activation
body: <p>I am working on a NavBar with drop-down menu. Everything is working fine, but I need to show the Tree menu on click. The problem is how to make visible only the menu that user clicked. I am adding 'active' className to display it.</p>
  
  <p>So, when user click 'Products' tab, it should only display the Products menu, not every menu at once.</p>
  
  <pre><code>&lt;nav&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;p&gt;Nav Item1&lt;/p&gt;
        &lt;div className='menu active'&gt;
          &lt;ul&gt;
            &lt;li&gt;Menu Item 1&lt;/li&gt;
            &lt;li&gt;Menu Item 2&lt;/li&gt;
            &lt;li&gt;Menu Item 3&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;p&gt;Nav Item2&lt;/p&gt;
        &lt;div className='menu'&gt;
          &lt;ul&gt;
            &lt;li&gt;Menu Item 1&lt;/li&gt;
            &lt;li&gt;Menu Item 2&lt;/li&gt;
            &lt;li&gt;Menu Item 3&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;p&gt;Nav Item3&lt;/p&gt;
        &lt;div className='menu'&gt;
          &lt;ul&gt;
            &lt;li&gt;Menu Item 1&lt;/li&gt;
            &lt;li&gt;Menu Item 2&lt;/li&gt;
            &lt;li&gt;Menu Item 3&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>So whenever I click on Nav Item, it should render the menu. Is there an easy way to do it? Or I need to create a function and state variable for every Nav Item?</p>