title: React implement active menu item in sidebar
body: <p>I'm using React version 16.6.3. I need some help to implement active menu item in sidebar. I need to do this thing: when the user clicks on any <code>&lt;li&gt;</code> in sidebar, the <code>&lt;li&gt;</code> must become active (for example, it gets class "active"). </p>
  
  <p>If the <code>&lt;li&gt;</code> is active and have <code>treeview</code> class, then, inside it, set to <code>&lt;ul&gt;</code> class "show" (if any)</p>
  
  <p>Here's the code:</p>
  
  <pre><code>import React , { Component } from "react"
  
  export default class Sidebar extends Component {
    constructor(props) {
      super(props);
      this.state = { 'activeItem': 0 }
    }
    render() {
      return (
        &lt;div className="main-sidebar"&gt;
          &lt;section className="sidebar"&gt;
            &lt;ul className="sidebar-menu tree"&gt;
              &lt;li className="nav-divider"&gt;&lt;/li&gt;
              &lt;li className="header"&gt;PERSONAL&lt;/li&gt;
  
              &lt;li&gt;
                &lt;a href="#"&gt;
                  &lt;span&gt;Dashboard&lt;/span&gt;
                &lt;/a&gt;
              &lt;/li&gt;
  
              &lt;li className="treeview"&gt;
                &lt;a href="#"&gt;
                  &lt;span&gt;Application&lt;/span&gt;
                &lt;/a&gt;
                &lt;ul class="treeview-menu"&gt;
                  &lt;li&gt;&lt;a href=""&gt;Chat app&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;Project&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;Contact / Employee&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
  
              &lt;li className="treeview"&gt;
                &lt;a href="#"&gt;
                  &lt;span&gt;Application&lt;/span&gt;
                &lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/section&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>