title: How to checked multiple checkbox in react.js?
body: <p>I am using react antd . I have got array of objects that's <strong>groupKey</strong> .I am mapping checkbox by using Groupkey and also I have got two different types of checkbox . One is Select All Checkbox . it actually works when user click on the Select All or User select on all  individual checkbox . Other is individual checkbox , user can Select on individually . when user submit on Button , then it's give me this data format ["manage_books","manage_journals","manage_deals"]</p>
  
  <p>here is my trying code : </p>
  
  <pre><code> let defaultCheckedList = ["manage_deals"];
  
  
  state = {
      groupKey: [{
              id: 1,
              key: "manage_books",
              label: "books"
          },
          {
              id: 2,
              key: "manage_journals",
              label: "journals"
          },
          {
              id: 3,
              key: "manage_deals",
              label: "deals"
          }
      ],
      checkedList: defaultCheckedList,
      output: [],
      indeterminate: true,
      checkAll: false
  };
  onCheckAllChange = e =&gt; {
      this.setState({
          checkedList: e.target.checked ?
              this.state.groupKey.map(item =&gt; item.key) :
              [],
          indeterminate: false,
          checkAll: e.target.checked
      });
  };
  
  onChange = (e, value) =&gt; {
      this.setState({
          checked: e.target.checked,
          output: this.state.output.concat(value)
      });
  };
  onSubmit = () =&gt; {
      console.log(this.state.output)
  }
  
  render(UI)
  
      &lt;
      div &gt;
      &lt;
      div className = "site-checkbox-all-wrapper" &gt;
      Select All &lt;
      Checkbox
  indeterminate = {
      this.state.indeterminate
  }
  onChange = {
      this.onCheckAllChange
  }
  checked = {
      this.state.checkAll
  }
  /&gt; &lt;
  /div&gt;
  
  I am looping checkbox by groupKey.I am passing key using onChange method. {
          this.state.groupKey.map(item =&gt; ( &lt;
              div className = "userpermission-content"
              key = {
                  item.id
              } &gt; {
                  item.label
              } &lt;
              Checkbox onChange = {
                  (e, value) =&gt; this.onChange(e, item.key)
              }
              value = {
                  item.key
              }
              /&gt;{" "} &lt;
              /div&gt;
          ))
      } &lt;
      button onClick = {
          this.onSubmit
      } &gt; submit &lt; /button&gt; &lt;
      /div&gt;
  );
  }
  }
  </code></pre>
  
  <p>In this code, you can see that two individual checkbox is initial select, I need to get completely like this: <a href="https://codesandbox.io/s/4k6qi" rel="nofollow noreferrer">https://codesandbox.io/s/4k6qi</a></p>
  
  <p>this is my codesanbox: <a href="https://codesandbox.io/s/check-all-ant-design-demo-vhidd?file=/index.js" rel="nofollow noreferrer">https://codesandbox.io/s/check-all-ant-design-demo-vhidd?file=/index.js</a></p>