React add class active on selected tab
<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>