title: How to add a class with React.js?
body: <p>I need to add the class <code>active</code> after clicking on the button and remove all other <code>active</code> classes.</p>
  <p>Look here please: <a href="https://codepen.io/azat-io/pen/RWjyZX" rel="nofollow noreferrer">https://codepen.io/azat-io/pen/RWjyZX</a></p>
  <pre><code>var Tags = React.createClass({
    setFilter: function(filter) {
      this.props.onChangeFilter(filter);
    },
    render: function() {
      return &lt;div className=&quot;tags&quot;&gt;
        &lt;button className=&quot;btn active&quot; onClick={this.setFilter.bind(this, '')}&gt;All&lt;/button&gt;
        &lt;button className=&quot;btn&quot; onClick={this.setFilter.bind(this, 'male')}&gt;male&lt;/button&gt;
        &lt;button className=&quot;btn&quot; onClick={this.setFilter.bind(this, 'female')}&gt;female&lt;/button&gt;
        &lt;button className=&quot;btn&quot; onClick={this.setFilter.bind(this, 'child')}&gt;child&lt;/button&gt;
        &lt;button className=&quot;btn&quot; onClick={this.setFilter.bind(this, 'blonde')}&gt;blonde&lt;/button&gt;
       &lt;/div&gt;
    }
  });
  
  var Kid = React.createClass({
    render: function() {
      return &lt;ul&gt;
        &lt;li&gt;{this.props.name}&lt;/li&gt;
        &lt;/ul&gt;
    }
  });
  
  var List = React.createClass({
    getInitialState: function() {
      return {
        filter: ''
      };
    },
    changeFilter: function(filter) {
      this.setState({
        filter: filter
      });
    },
    render: function() {
      var list = this.props.Data;
      
      if (this.state.filter !== '') {
        list = list.filter((i)=&gt; i.tags.indexOf(this.state.filter) !== -1);
        console.log(list);
      } 
      
      list = list.map(function(Props){
        return &lt;Kid {...Props} /&gt;
      });
  
      return &lt;div&gt;
        &lt;h2&gt;Kids Finder&lt;/h2&gt;
        &lt;Tags onChangeFilter={this.changeFilter}/&gt;
        {list}
      &lt;/div&gt;
    }
  });
  
  var options = {
    Data:  [{
      name: 'Eric Cartman',
      tags: ['male', 'child']
    },{
      name: 'Wendy Testaburger',
      tags: ['female', 'child']
    },{
      name: 'Randy Marsh',
      tags: ['male']
    },{
      name: 'Butters Stotch',
      tags: ['male', 'blonde', 'child']
    },{
      name: 'Bebe Stevens',
      tags: ['female', 'blonde', 'child']
    }]
  };
  
  var element = React.createElement(List, options);
  React.render(element, document.body);
  </code></pre>
  <p>How do I make it better?</p>