title: Checking a CheckBox by clicking a Button element
body: <p>I am revising Core React.js concepts and I am having a hard time doing this.
  I have the App component that displays a checkbox, a div section that displays a message and a counter value, and two buttons that change the div section message and increment the counter
  The component has state data for the message, counter, and theme.</p>
  <p>What I want to achieve is this.
  First I want to prevent the checkbox default behavior by using preventDefault
  Second I want to toggle the checkbox from unchecked to checked by clicking one of the button element of the component.</p>
  <p>Here is the code I wrote</p>
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
  
  export default class App extends Component {
  
      constructor(props) {
          super (props);
          this.state = {
              message: 'Ready',
              counter: 0,
              theme: 'secondary'
          }
      }
  
      handleEvent = (event, newTheme) =&gt; {
          event.persist();
          this.setState({ 
              counter: this.state.counter + 1,
              theme: newTheme
          },() =&gt; {
              this.setState({ message: `${event.type}: ${this.state.counter}`});
              this.toggleCheckBox()
          });
      }
  
      toggleCheckBox = (event) =&gt; {
          if (this.state.counter === 0) {
              event.preventDefault();
          }
      }
  
      render() {
          return (
              &lt;div className=&quot;m-2&quot;&gt;
                  &lt;div className=&quot;form-check&quot;&gt;
                      &lt;input className=&quot;form-check-input&quot; type=&quot;checkbox&quot;
                          onClick={ this.toggleCheckBox } /&gt;
                      &lt;label&gt;This is a checkbox&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div className={ `h4 bg-${this.state.theme} 
                                      text-white text-center p-2`}&gt;
                      { this.state.message }
                  &lt;/div&gt;
                  &lt;div className=&quot;text-center&quot;&gt;
                      &lt;button className=&quot;btn btn-primary&quot;
                              onClick={ (e) =&gt; this.handleEvent(e, &quot;primary&quot;) }&gt;
                              Normal
                      &lt;/button&gt;
                      &lt;button className=&quot;btn btn-danger m-1&quot;
                              onClick={ (e) =&gt; this.handleEvent(e, &quot;danger&quot;) }&gt;
                              Danger
                      &lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>