title: ReactJS MaterialUI Checkboxes- setting state within onCheck()
body: <p>Using <code>material-ui 0.15.3</code> and <code>react 15.3.0</code>.</p>
  
  <p>I have a Checkbox component and want to use <code>this.setState</code> within its <code>onCheck</code> function. </p>
  
  <p>It became apparent pretty quickly that I had to manually pass something into the Checkbox's <code>checked</code> prop. If I don't, then I cannot use setState. If I try to do so, then the visual component of the checkbox wont update. E.g. I click the checkbox and it stays empty. <strong>My first question is why? Why can't I keep this as an uncontrolled component? Why must I pass something into the <code>checked</code> prop?</strong></p>
  
  <pre><code>    &lt;Checkbox
      label="1"
      style={styles.checkbox}
      onCheck={this.handleCheck.bind(this)}
      checked={this.state.box1} // if this is not supplied then I cannot use setState within handleCheck()
  </code></pre>
  
  <p>handleCheck():</p>
  
  <pre><code>  handleCheck(event, checked) {
      this.setState({
          box1: checked 
          someState: someValue 
      });
   }
  </code></pre>
  
  <p>Now I have multiple checkboxes, <strong>so my second question is, how can I structure this so it is as clean as possible? Will I need to have a separate state variable for each checkbox with individual handleCheck() functions?</strong> I feel like that would get messy very quickly. e.g. (state for box1, box2, box3 etc.)</p>