title: Semantic-UI React Checkbox state not working
body: <p>I've got a parent container that calls a class-based react component child (since the semantic-ui react docs are all written with class-based components). The child component has a <code>Form.Field</code>:</p>
  
  <pre><code>&lt;Form.Field 
      control={Checkbox} 
      label={{children: 'cardreader'}}
      checked = {this.state.cardReaderChecked}                
      onChange={this.cardReaderToggleHandler}
  /&gt;
  </code></pre>
  
  <p>I've got a <code>state</code>:</p>
  
  <pre><code>state = {
      cardReaderChecked: false,     
  }
  </code></pre>
  
  <p>and a <code>cardReaderToggleHandler</code>:</p>
  
  <pre><code>cardReaderToggleHandler = () =&gt; {
      console.log(this.state.cardReaderChecked);
      this.setState((prevState, props) =&gt; ({
          cardReaderChecked : !prevState.cardReaderChecked
      }))
  console.log(this.state.cardReaderChecked);
  }
  </code></pre>
  
  <p>I've tried toggling on <code>this.state.cardReaderChecked</code> but I found a lot of references and docs recommending this approach with the <code>prevState</code> to avoid the delay in state updating.</p>
  
  <p>However, there must a logical fault because it doesn't work. If I refresh the page, the <code>checkbox</code> is clear as <code>this.state.cardReaderChecked</code>.</p>
  
  <p>The first time I click the <code>checkbox</code> it renders with the tick, and my <code>this.state.cardReaderChecked</code> updates to <code>true</code> (according to my trusty React tools in Chrome). However, both <code>console.log</code> printouts give me a <code>false</code> and if I pass my <code>state</code> back to the parent form, it also shows that the checkbox is false.</p>
  
  <p>Every subsequent click toggles but a ticked <code>checkbox</code> shows a <code>true</code> state but passes on a <code>false</code> to the parent form (that's where the <code>console.log</code> is currently) and vice versa an unticked <code>checkbox</code> passes back a <code>true</code>.</p>
  
  <p>I'm almost tempted to remove the <code>not</code> from the <code>prev.state</code> in the <code>setState</code>, but I would prefer to understand why this happens. </p>
  
  <p>Bonus Question: How can I query the <code>checkbox</code> state <code>checked</code> in a functional component?</p>