title: Update dom according to function return value
body: <p>I am trying to make a list where you can only have one active element. The state updates just like it is supposed to, but the isActive function only activates at first and then doesn't when the state changes.</p>
  
  <p>Here is a working example of what I want to do in ES5: <a href="https://codepen.io/anon/pen/mRWqQX" rel="nofollow noreferrer">https://codepen.io/anon/pen/mRWqQX</a></p>
  
  <p>My code in ES6 which doesn't work. The isActive function doesn't trigger on state change.</p>
  
  <pre><code>import React from 'react'
  
  class RadioButtons extends React.Component {
    constructor() {
      super();
      this.isActive = this.isActive.bind(this);
  
      this.state = {
        selected: ""
      }
    }
    isActive(value) {
      if (this.state.selected === value) 
        return 'active';
      else 
        return null;
    }
    makeActive(value) {
      this.state = {
        selected: value
      }
    }
    render(){
      return (
        &lt;div&gt;
          &lt;div className={this.isActive("option1")} onClick={this.makeActive.bind(this, 'option1')} &gt; option 1&lt;/div&gt;
          &lt;div className={this.isActive("option2")} onClick={this.makeActive.bind(this, 'option2')} &gt; option 2&lt;/div&gt;
          &lt;div className={this.isActive("option3")} onClick={this.makeActive.bind(this, 'option3')} &gt; option 3&lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default RadioButtons;
  </code></pre>