title: React controlled checkbox (toggle) on props.
body: <p>I need to make a checkbox (toggle, like IOS) component, that doesn't use state and controls only by props. The current code looks like this: </p>
  
  <pre><code>export class Checkbox extends React.Component {
  
  handleChange(event) {
     this.props.onChange({value: event.target.value});
  }
  
  render() {
      return (
          &lt;span&gt;
               &lt;input class="ios_toggle" type="checkbox"
                   value={this.props.value}
                   disabled={this.props.disabled}
                   onChange={this.handleChange}
               /&gt;
          &lt;/span&gt;
       );
   }
  }
  </code></pre>
  
  <p>I use it like this: </p>
  
  <pre><code>&lt;Checkbox value={true} disabled={false} /&gt;
  </code></pre>
  
  <p>And it almost works, but: </p>
  
  <ol>
  <li>It looks unchecked, even if props equal to <code>value={true}</code></li>
  <li>By clicking on this toggle it changes, but it shouldn't. I mean, if I put the prop <code>value={true}</code>, in theory it'll be the same, no matter what I do with it in browser?  </li>
  </ol>
  
  <p>What did I miss? </p>