title: Determine when at least one checkbox is checked in ReactJS
body: <p>I'm trying to determine when at least one checkbox is checked in React. </p>
  
  <p>I have a Checkbox component:</p>
  
  <pre><code>import * as React from 'react';
  import * as DOM from 'react-dom';
  import PropTypes from 'prop-types';
  
  class Checkbox extends React.Component {
    constructor(props) {
          super(props);
    }
  
      render() {
        return(
          &lt;div&gt;
          &lt;label&gt;
          &lt;input 
        type="checkbox" 
        name={this.props.value} 
        value={this.props.value} 
        onClick={this.props.function}
        /&gt;
      &lt;span&gt;
        &lt;span&gt;
          {this.props.title}
        &lt;/span&gt;
      &lt;/span&gt;
    &lt;/label&gt;
    &lt;/div&gt;
        );
      }
  }
  
  Checkbox.PropTypes = {
    title: PropTypes.string,
    value: PropTypes.string,
    function: PropTypes.func,
  }
  
  export default NewsletterCheckbox;
  </code></pre>
  
  <p>It is imported and used in a parent component:</p>
  
  <pre><code>  checkFields() {
      // check if other fields are not empty and valid
      console.log(this.state);
    }
    isCheckboxChecked(event) {
      // determine if at least one checkbox is checked, and if so
      // update state
      const checkboxes = document.querySelectorAll('input[type="checkbox"]');
      const checkedOne = Array.prototype.slice.call(checkboxes).some(x =&gt; x.checked);
      if (checkedOne) {
        this.setState({ checkboxValid: true }, this.checkFields);
      } else {
        this.setState({ checkboxValid: false }, this.checkFields);
      }
    }     
    const newsletterArray = NewsletterData.map((obj) =&gt; (
      &lt;div key={obj.value}&gt;
        &lt;div&gt;
        &lt;Checkbox
          value={obj.value}
          title={obj.title}
          function={this.isCheckboxChecked}
          /&gt;
        &lt;/div&gt;
        &lt;p&gt;
            {obj.body}
            &lt;br /&gt;
          &lt;a onClick={(e) =&gt;  {this.handleModal(e) }} data-iframe={obj.link}&gt;
              See Preview
            &lt;/a&gt;
          &lt;/p&gt;
      &lt;/div&gt;
    ));
  </code></pre>
  
  <p>The issue I'm running in to is that the function that runs when any of the checkboxes are checked, <code>isCheckboxChecked()</code>, once one field has been checked, if I uncheck that field (or check a bunch, and then uncheck them all), it never comes back as false.</p>
  
  <p>Is there a better way of checking if at least one checkbox is checked in React without querying the DOM (which doesn't seem to work correctly with React rendered checkboxes)?</p>