title: Button with 3 states using React
body: <p>I've got a need for a button with 3 states.</p>
  
  <p>Each state, would need to handle click and send a value.</p>
  
  <p>The use-case is:</p>
  
  <ul>
  <li>Non-favourite</li>
  <li>Favourite</li>
  <li>Uber-favourite</li>
  </ul>
  
  <p>I tried using <code>this.state.count + 1</code> to indicated the levels, but had no success. I am unsure this is the best way either. </p>
  
  <p>I am using the <code>const fill</code> as the CSS value (colour) I will pass into the <code>svg</code> element.</p>
  
  <p>Here is my attempt, but it is limited as <code>checked</code> only has 2 states (on/off) and I need 3. It is also in <a href="http://codepen.io/yarnball/pen/oZaprP?editors=1111" rel="nofollow noreferrer">this codepen</a>.</p>
  
  <pre><code>class Switch extends React.Component {
    constructor ( props ) {
      super( props );
      this.state = {
        checked: !!props.checked
      };
    }
    handleClick(e) {
          this.setState({
        checked: !this.state.checked
      });
    }
  
    render () {
      const fill = this.state.checked ? "#E1E0DD" : "#999999";
      return (
          &lt;button className="switch" onClick={this.handleClick.bind(this)} &gt;
        &lt;svg width="100" height="100"&gt;
          &lt;g&gt;
            &lt;path id="svg_2" d="m0,38l37,0l11,-38l11,38l37,0l-30,23l11,38l-30,-23l-30,23l11,-38l-30,-23l0,0z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill={fill} /&gt;
          &lt;/g&gt;
        &lt;/svg&gt;
              &lt;/button&gt;
      );
    }
  }
  
  const App = () =&gt; (
      &lt;div&gt;
          &lt;Switch checked={ true } /&gt;
      &lt;/div&gt;
  )
  
  React.render( &lt;App /&gt;, document.getElementById( "page" ) );
  </code></pre>