title: React add class active on selected tab
body: <p>I have the following:</p>
  
  <pre><code>var Tab = React.createClass({
      getInitialState: function(){
          return {
            selected:''
          }
      },
      activateTab: function(e) {
          e.preventDefault();
          $('.navigation--active').removeClass('navigation--active');
          this.setState({selected  : true});
      },
      render: function() {
          var isActive = this.state.selected === true ? 'navigation--active': '';
          return (
              &lt;li onClick={this.activateTab} className={isActive}&gt;
                  &lt;p&gt;
                      {this.props.content}
                  &lt;/p&gt;
              &lt;/li&gt;
          );
      }
  });
  
  var Tabs = React.createClass({
      render: function() {
          var tabs = [],
              total = this.props.data.points.total,
              handleClick = this.handleClick;
          total.forEach(function(el, i){
              tabs.push(
                  &lt;Tab content = {el.name} 
                       key = {i}/&gt;
              );
          });
          return (
              &lt;ul className="navigation"&gt;
                  {tabs}
              &lt;/ul&gt;
          );
      }
  });
  </code></pre>
  
  <p>however it only works when you click once on every tab, if you click the second time on the same tab the class doesn't get added anymore</p>