title: How to uncheck the checked element on removal of its tag in react js
body: <p>I have a checkbox and a tag component. On checking each element a tag of that element is displayed below which is achieved by the below code. But I want to map each tag with the respective checkbox element. When I remove the tag of an element, the corresponding element should be unchecked from the checkbox. Link to my code <a href="https://codesandbox.io/s/quizzical-borg-77nlv" rel="nofollow noreferrer">https://codesandbox.io/s/quizzical-borg-77nlv</a></p>
  
  <pre><code>import { Checkbox, Tag, Button } from "antd";
  class Filters extends Component {
    state = {
      tags: []
    };
    onCheck = value =&gt; {
      const tags = [...this.state.tags];
      console.log("The values", value);
      value.map(el =&gt; !tags.includes(el) &amp;&amp; tags.push(el));
      this.setState({ tags });
    };
    onCheck1 = value =&gt; {
      const tags = [...this.state.tags];
      value.map(el =&gt; !tags.includes(el) &amp;&amp; tags.push(el));
      this.setState({ tags });
      console.log("The values", value);
    };
    onCloseTag = (e, i) =&gt; {
      e.preventDefault();
      this.setState({
        tags: this.state.tags.filter((_, index) =&gt; index !== i)
      });
    };
    render() {
      const { tags } = this.state;
      return (
        &lt;React.Fragment&gt;
          &lt;div&gt;
            CHECKBOX 1
            &lt;Checkbox.Group
              name="checkbox_1"
              onChange={this.onCheck}
              style={{ width: "100%" }}
            &gt;
              &lt;Checkbox value="a"&gt;A&lt;/Checkbox&gt;
              &lt;Checkbox value="b"&gt;B&lt;/Checkbox&gt;
            &lt;/Checkbox.Group&gt;
          &lt;/div&gt;
          &lt;div&gt;
            CHECKBOX 2
            &lt;Checkbox.Group
              name="checkbox_2"
              onChange={this.onCheck1}
              style={{ width: "100%" }}
            &gt;
              &lt;Checkbox value="2a"&gt;2A&lt;/Checkbox&gt;
              &lt;Checkbox value="2b"&gt;2B&lt;/Checkbox&gt;
            &lt;/Checkbox.Group&gt;
          &lt;/div&gt;
          &lt;div style={{ margin: "1rem" }}&gt;
            {tags.map((tag, i) =&gt; (
              &lt;Tag
                className="quick-filter-tag-main"
                key={i}
                closable
                onClose={e =&gt; this.onCloseTag(e, i)}
                color="#f50"
              &gt;
                {tag}
              &lt;/Tag&gt;
            ))}
          &lt;/div&gt;
        &lt;/React.Fragment&gt;
      );
    }
  }
  </code></pre>
  
  <p>When an element say <strong>a</strong> is checked it will be displayed as a tag below. If I remove the tag , the <strong>a</strong> should be unchecked.</p>