title: Select/Unselect All checkbox in reactJs
body: <p>I am trying to implement select/unselect all functionality in reactJs but couldn't make it happen.</p>
  
  <p>I have made select/unselect all main header checkbox functional and the single elements can also be selected or unselected.</p>
  
  <p><strong>My work link:</strong> <a href="https://codesandbox.io/s/m3nqw70m59" rel="nofollow noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit m3nqw70m59"></a></p>
  
  <pre><code>import React, { Component } from 'react'
  import ReactDOM from 'react-dom'
  
  class Box extends Component{
      constructor(props){
          super(props);
          this.state = {
              allChecked: false,
              list: [
                  {id:1, name: "item1", isChecked: false},
                  {id:2, name: "item2", isChecked: false},
                  {id:3, name: "item3", isChecked: false},
              ],
          };
      }
  
  handleChange = (e) =&gt; {
      let list =  this.state.list;
      let allChecked = this.state.allChecked;
      if(e.target.value === "checkAll"){
          list.forEach(item =&gt; {
              item.isChecked = e.target.checked;
              allChecked = e.target.checked;
          });
      }
      else{
          list.find( item =&gt; item.name === e.target.name).isChecked = e.target.checked;
      }
      this.setState({list:list, allChecked: allChecked});
  }
  
  renderList = () =&gt; {
      return this.state.list.map(item =&gt;
          &lt;div&gt;
              &lt;input key={item.id} type="checkbox" name={item.name} value={item.name} checked={item.isChecked} onChange={this.handleChange} /&gt;
              &lt;label&gt;{item.name}&lt;/label&gt;
          &lt;/div&gt;
      )
  }
  render(){
      return(
          &lt;div&gt;
              &lt;input type="checkbox" 
              value="checkAll" 
              checked={this.state.allChecked} 
              onChange={this.handleChange} /&gt;Check all
              &lt;br/&gt;
              {this.renderList()}
          &lt;/div&gt;
      );
    }
  }
  
  ReactDOM.render(&lt;Box/&gt;, document.getElementById('root'));
  </code></pre>
  
  <p>To be straight forward, i want this (<a href="https://jsfiddle.net/52uny55w/" rel="nofollow noreferrer">https://jsfiddle.net/52uny55w/</a>) type of functionality using the plain Javascript but not with the jquery for some reasons.</p>