title: ReactJS How to add active class and set state to true or false on toggle list items
body: <p>I've created a togglelist with <code>react</code> where when the user clicks a listitem, it folds out and shows some content. So far so god, but right now it only gets hidden again when the user clicks on another listitem which is ok, but I want to achieve that I can toggle an item, I mean, show and hide when I click on the same item -> e.g I want to set the state of the item to true/false on click but I dont know how to do that. Right now I'm just adding an active class, but how to fire two events on a single click, which is to set an active class and change the state at the same time?</p>
  
  <p>here is what I got so far:</p>
  
  <pre><code>export default class ToggleList extends React.Component{
  constructor(props){
      super()
  
      this.state = {
          activeItem: null
          activeState: false // maybe something like this?
      };
  }
  
  onItemActive(item) {
      this.setState({activeItem: item})
      this.setState({activeState: !this.state.activeState}) // SOMETHING LIKE THIS?
  }    
  
  render() {
  
      let itemsArray = [
          "Lorem ipsum dolor?", 
          "consectetur adipiscing elit?", 
          "commodo consequat?",
          "Excepteur sint occaecat?"
      ]
  
      let items = itemsArray.map( (item, index) =&gt; {
          return (
            &lt;ToggleListItem key={index} item={item} onItemActive={this.onItemActive.bind(this)} 
            active={item === this.state.activeItem} /&gt;
          );
      });        
      return(
          &lt;div className="flex-grid"&gt;
              &lt;div className="flex-grid-1"&gt;
                  &lt;div className="flex-grid-header"&gt;
                      &lt;h3&gt;{this.props.title}&lt;/h3&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div className="flex-grid-2 faq-list"&gt;
                  &lt;div className="toggleList"&gt;
                      &lt;ul&gt;
                          {items}
                      &lt;/ul&gt;
                  &lt;/div&gt;                    
              &lt;/div&gt;
          &lt;/div&gt;            
  
      )
  }
  </code></pre>
  
  <p>}</p>
  
  <pre><code>class ToggleListItem extends React.Component {
  constructor(props){
      super()
  }
  setActive() {
      this.props.onItemActive(this.props.item);
  }    
  render() {
      let item = this.props.item;
      return (
        &lt;li className={this.props.active ? 'active' : ''} onClick={this.setActive.bind(this)} data-selected={this.props.selected}&gt;
              &lt;div className="item-title"&gt;
                  &lt;p&gt;{item}&lt;/p&gt;
              &lt;/div&gt;
              &lt;div className="toggle-icon-wrapper"&gt;
                  &lt;div className="toggle-icon"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div className="toggleList-content"&gt;
                  &lt;p&gt;
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                      Ut enim ad minim veniam
                  &lt;/p&gt;
              &lt;/div&gt;
        &lt;/li&gt;
      );
    }
  }
  </code></pre>