title: How to select all checkboxes in React?
body: <p>I have this module:</p>
  <pre><code>import React, { Component } from 'react'
  import EmailListItem from './EmailListItem'
  import { createContainer } from 'meteor/react-meteor-data'
  import { Emails } from '../../../../../imports/collections/emails/Emails'
  
  class EmailList extends Component {
    constructor (props) {
      super(props)
      this.state = {
        selectedEmails: new Set(),
        checked: false
      }
    }
  
    handleSelectedEmails (selectedEmail, checked) {
      let selectedEmails = this.state.selectedEmails
      if (checked) {
        selectedEmails.add(selectedEmail)
      } else {
        selectedEmails.delete(selectedEmail)
      }
      this.setState({selectedEmails})
      console.log('selectedEmails', this.state.selectedEmails)
    }
    removeSelected () {
      const selectedEmails = Array.from(this.state.selectedEmails)
      Meteor.call('emails.remove', selectedEmails, (err, result) =&gt; {
        if (err) console.log(err)
        if (result) console.log(result)
      })
    }
    checkedClick () {
      this.setState({checked: !this.state.checked})
      console.log('chcekedClick')
    }
    renderList () {
      console.log(this.props)
      return this.props.emails.map(email =&gt; {
        console.log(email)
        const { name, opr, ctr, _id } = email
        const createdAt = email.createdAt.toDateString()
        const link = `/dashboard/emailpreview/${_id}`
        return (
          &lt;EmailListItem
            selecetedAllEmails={this.state.checked}
            handleSelectedEmails={this.handleSelectedEmails.bind(this)}
            name={name}
            createdAt={createdAt}
            opr={opr}
            ctr={ctr}
            link={link}
            key={email._id}
            id={email._id} /&gt;
          )
      })
    }
    render () {
      // TODO: make checks with state
      return (
        &lt;div className=&quot;email_list&quot;&gt;
          &lt;table&gt;
            &lt;thead&gt;
              &lt;tr&gt;
                &lt;td&gt;&lt;input onChange={this.checkedClick.bind(this)} type=&quot;checkbox&quot; checked={this.state.checked} /&gt;&lt;/td&gt;
                &lt;td&gt;Title&lt;button onClick={this.removeSelected.bind(this)} className=&quot;btn btn-danger&quot;&gt;Remove&lt;/button&gt;&lt;/td&gt;
                &lt;td&gt;Dates&lt;/td&gt;
                &lt;td&gt;Open Rates&lt;/td&gt;
                &lt;td&gt;CTA&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
              {this.renderList()}
            &lt;/tbody&gt;
          &lt;/table&gt;
  
        &lt;/div&gt;
    )
    }
  }
  
  export default createContainer(() =&gt; {
    Meteor.subscribe('emails')
    return { emails: Emails.find({}).fetch() }
  }, EmailList)
  </code></pre>
  <p>And it renders this module</p>
  <pre><code>import React, { Component } from 'react'
  import { Link } from 'react-router'
  
  class EmailListItem extends Component {
    constructor (props) {
      super(props)
      this.state = {
        checked: false
      }
    }
  
    checkedClick () {
      this.setState({checked: !this.state.checked})
      console.log('chcekedClick')
    }
  
    componentDidUpdate () {
      console.log('componentDidUpdate')
      const { myCheckbox } = this.refs
      console.log('myCheckbox', myCheckbox)
      console.log('myCheckbox.name', myCheckbox.name)
      console.log('myCheckbox.checked', myCheckbox.checked)
      if (this.props.selecetedAllEmails) {
        console.log('componentDidUpdate IF')
        this.checkedClick()
        this.props.handleSelectedEmails(myCheckbox.name, myCheckbox.checked)
      }
    }
    render () {
      console.log('_id', this.props.id)
      return (
        &lt;tr&gt;
          &lt;td&gt;&lt;input ref=&quot;myCheckbox&quot;
            onChange={(event) =&gt; {
              this.checkedClick()
              this.props.handleSelectedEmails(event.target.name, event.target.checked)
            }}
            checked={this.state.checked}
            type=&quot;checkbox&quot; name={this.props.id} /&gt;&lt;/td&gt;
          &lt;td&gt;&lt;Link to={this.props.link}&gt;{this.props.name}&lt;/Link&gt;&lt;/td&gt;
          &lt;td&gt;{this.props.createdAt}&lt;/td&gt;
          &lt;td&gt;Open Rates&lt;/td&gt;
          &lt;td&gt;CTA&lt;/td&gt;
        &lt;/tr&gt;
      )
    }
  }
  
  export default EmailListItem
  </code></pre>
  <p>As you can see, for each email item I have a checkbox. I can select a few checkboxes, and click that remove button which will call remove my selected items. Now in the top I have a checkbox which should select all the checkboxes. My solution to this was to store the global checkbox checked and pass it as a prop to all the items. Then in the items I perform a check on componentDidUpdate and if the global checkbox is selected then I check that item as well. But this results in an infinite loop. What would be the best solution here?</p>