How to use antd multiple checkbox in reactjs?

Question

I am using antd checkbox . I am storing checked value by using array of value , but I need to store unchecked array of value .

    const plainOptions = ["Apple", "Pear", "Orange"];
    const defaultCheckedList = ["Apple", "Orange"];

      state = {
        checkedList: defaultCheckedList
      };

      onChange = checkedList => {
        this.setState({
          checkedList
        });
      };

      onCheckAllChange = e => {
        this.setState({
          checkedList: e.target.checked ? plainOptions : []
        });
      };

      onCheckItem = value => e => {
        this.setState({
          checkedList: this.state.checkedList.includes(value)
            ? this.state.checkedList.filter(x => x !== value)
            : [...this.state.checkedList, value]
        });
      };

 // This is checked All , When user click on this checked box , it will be store array of value.  
              <Checkbox
                indeterminate={
                  checkedList.length < plainOptions.length && checkedList.length > 0
                }
                onChange={this.onCheckAllChange}
                checked={checkedList.length === plainOptions.length}
              >
                Check all
              </Checkbox>

            {plainOptions.map((item, idx) => (
              <Checkbox
                key={item + idx}
                onChange={this.onCheckItem(item)}
                checked={checkedList.includes(item)}
              >
                {item}
              </Checkbox>
            ))}

Currently, when I checked on checkbox , it will give me array of values such as ["apple","Orange"], but I want to keep store unchecked value by using array of value ["Pear"]

Expected Output for Unchecked : Unchecked : ["Pear"]

Here is my codesanbox:

https://codesandbox.io/s/check-all-ant-design-demo-b3udh?fontsize=14&hidenavigation=1&theme=dark&file=/index.js:0-1613

Answer 1

const plainOptions = ["Apple", "Pear", "Orange"];
const defaultCheckedList = ["Apple", "Orange"];

class App extends React.Component {
  state = {
    checkedList: defaultCheckedList,
    uncheckedList: []
  };

  onChange = checkedList => {
    this.setState({
      checkedList
    });
  };

  onCheckAllChange = e => {
    this.setState({
      checkedList: e.target.checked ? plainOptions : [],
      uncheckedList: e.target.checked ? [] : plainOptions
    });
  };

  onCheckItem = value => e => {
    this.setState(
      {
        checkedList: this.state.checkedList.includes(value)
          ? this.state.checkedList.filter(x => x !== value)
          : [...this.state.checkedList, value]
      },
      () => {
        this.setState({
          uncheckedList: plainOptions.filter(
            o => !this.state.checkedList.includes(o)
          )
        });
      }
    );
  };

  render() {
    const { checkedList, uncheckedList } = this.state;
    console.log(uncheckedList);
    return (
      <div>
        <div className="site-checkbox-all-wrapper">
          <Checkbox
            indeterminate={
              checkedList.length < plainOptions.length && checkedList.length > 0
            }
            onChange={this.onCheckAllChange}
            checked={checkedList.length === plainOptions.length}
          >
            Check all
          </Checkbox>
        </div>
        <br />
        {plainOptions.map((item, idx) => (
          <Checkbox
            key={item + idx}
            onChange={this.onCheckItem(item)}
            checked={checkedList.includes(item)}
          >
            {item}
          </Checkbox>
        ))}
      </div>
    );
  }
}