title: Toggle class on menu items with ReactJS
body: <p>I have a React-Redux application, and I have created a "Sidebar" component in which I would like to toggle 'active' class onClick of each Menu item.</p>
  
  <p>The current code that I have toggles the 'active' class on all the menu items.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>import React, {Component} from 'react'
  import {connect} from 'react-redux'
  
  export default class Sidebar extends Component {
  constructor(props) {
      super(props)
  
      this.toggleClass= this.toggleClass.bind(this);
      this.state = {
        activeIndex: false
      }
  }
  
  toggleClass(e) {
      const currentState = this.state.activeIndex;
      this.setState({ activeIndex: !currentState });
  };
  
  render(){
      return(
          &lt;div id="sidebar"&gt;
              &lt;div className="nav"&gt;
                  &lt;ul className="dashboard-menu"&gt;
                      {this.renderSidebarMenuItems}
                      &lt;li className={this.state.activeIndex ? 'active': null}  onClick={this.toggleClass}&gt;Menu item 1&lt;/li&gt;
                      &lt;li className={this.state.activeIndex ? 'active': null}  onClick={this.toggleClass}&gt;Menu item 2&lt;/li&gt;
                      &lt;li className={this.state.activeIndex ? 'active': null}  onClick={this.toggleClass}&gt;Menu item 3&lt;/li&gt;
                      &lt;li className={this.state.activeIndex ? 'active': null}  onClick={this.toggleClass}&gt;Menu item 4&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  
  <p>}</p>
  
  <p>I need a solution such that onClick of each menu item only that elements class changes to 'active' and all other menu items go back empty class.</p>
  
  <p>Thank you</p>