title: Toggle Show/Hide `active` class on li's in react js
body: <p>Hi i want to show/hide the class when click on li's in a ul. Following is the code of ul:</p>
  
  <pre><code>&lt;ul className="period"&gt;
                              &lt;li className="" onClick={this.onChangeForDays} value="Indefinitely"&gt;Indefinitely&lt;/li&gt;
                              &lt;li className="active" onClick={this.onChangeForDays} value="1"&gt;1 Day&lt;/li&gt;
                              &lt;li className="" onClick={this.onChangeForDays} value="7"&gt;1 Week&lt;/li&gt;
                              &lt;li className="" onClick={this.onChangeForDays} value="30"&gt;1 Month&lt;/li&gt;
                              &lt;li className="" onClick={this.onChangeForDays} value="90"&gt;3 Months&lt;/li&gt;
                              &lt;li className="" onClick={this.onChangeForDays} value="180"&gt;6 Months&lt;/li&gt;
                          &lt;/ul&gt;
  </code></pre>
  
  <p>So what i want to achieve is to write a common function when i click on any of the <code>&lt;li&gt;</code> it should show <code>active</code> class for that particular <code>&lt;li&gt;</code> and hide the <code>active</code> class for all other <code>&lt;li&gt;</code>.
  One more thing i want to show <code>active</code> class by default on one of the <code>&lt;li&gt;</code> as well so lets say i want first <code>&lt;li&gt;</code> to have <code>active</code> class by default, i tried to write the function but i got stuck.</p>
  
  <pre><code>   onChangeForDays(changeEvent) {
      this.setState({
          'fordays': changeEvent.target.value,
          'isActive': true
      });
  }
  </code></pre>
  
  <p>how can i achieve this can someone help.
  Thanks</p>