How to create Checkboxes with CheckAll checkbox in react hooks?

Question

for some reason the program is crash every time there is a value in the devicesKeys array: "Checkbox defines an invalid contextType" and also "Uncaught TypeError: Cannot read property 'indexOf' of undefined"

note: In my tests I made sure that "devicesKeys" array is never in an undefined state. it seems like a react context problem, but I don't know how to solve it.

this is the code: https://codesandbox.io/s/youthful-tharp-bmdw4?file=/src/App.js

The original Docs: https://ant.design/components/checkbox/#components-checkbox-demo-check-all

would you upload your code to sandbox.io or codepen or to anything similar so that it's easy for us to see the problem — German
– German, Commented Oct 1, 2020 at 2:26

guy · Accepted Answer · 2020-10-01 03:56:05Z

1

I am not sure why would you want to use CheckBoxGroup, you can achieve it by using rowSelection property on table:

return (
    <Table
      columns={columns}
      dataSource={devices}
      rowSelection={{ onSelectAll: onCheckAllChange }}
      pagination={false}
    ></Table>
);

and callback would be:

function onCheckAllChange(selected, selectedRows, changeRows) {
    setCheckState({
      checkedList: selected ? devicesKeys : [],
      indeterminate: false,
      checkAll: selected
    });
}

Check this codesandbox out.

Edit

The suggested method works, but it's deprecated so the suggested method is using the "onChange" callback.

this is the table:

<Table
  columns={columns}
  dataSource={devices}
  rowSelection={{ onChange }}
  pagination={false}
/>

The callback:

function onChange(checkedList, selectedRows) {
  setCheckedList(checkedList);
}

this is a minimal sandbox of the new version: https://codesandbox.io/s/quirky-butterfly-9c52v?file=/mytable.js

edited Oct 1, 2020 at 3:56

guy

1972 silver badges15 bronze badges

answered Oct 1, 2020 at 2:53

Dipen Shah

26.2k1 gold badge37 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

guy Over a year ago

amazing. I was awake all night trying to figure it out. now all works. many thanks.

Dipen Shah Over a year ago

Haven't we all have been there! :)

Collectives™ on Stack Overflow

How to create Checkboxes with CheckAll checkbox in react hooks?

1 Answer 1

Edit

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Edit

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related