title: React.js | How to handle className in a better way?
body: <p>I want to handle className using event and state, like this</p>
  
  <pre><code>class SampleComponent extends React.Component {
  
    constructor(props) {
      super(props);
  
      this.state = {
        class1: 'bar',
        class2: 'bar'
      };
    }
  
    handleBarClick() {
      this.setState({
        class1: 'bar active',
        class2: 'bar'
      });
    }
  
    handleFooClick() {
      this.setState({
        class1: 'bar',
        class2: 'bar active'
      });
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;span className={this.class1} onClick={this.handleBarClick.bind(this)}&gt;bar&lt;/span&gt;
          &lt;span className={this.class2} onClick={this.handleFooClick.bind(this)}&gt;foo&lt;/span&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>but this code is kind of wasteful, it should be more briefly.</p>
  
  <p>I want to write in a better way, can anyone give some advice? Thanks.</p>