In your code sample, the onCheck function doesn't change any checkedlist.You are just changing checkAll state to true. So it is not updating the checkboxes.
Here is my two different solution's for your problem.
const onloadOptions = [
{ label: 'option 1', value: 101 },
{ label: 'option 2', value: 102 }
];
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
checkedList: [],
checkAll: false,
};
}
onCheck = (e) => {
const values= onloadOptions.map(record => record.value)
this.setState({
checkAll: e.target.checked,
checkedList: e.target.checked ? values : [],
});
;
}
onGroupChange = (checkedList) => {
this.setState({
checkedList,
checkAll: checkedList.length === onloadOptions.length,
});
}
render() {
console.log();
return (
<div>
<Checkbox onChange={this.onCheck}
checked={this.state.checkAll} >check all</Checkbox>
<Checkbox.Group options={onloadOptions} onChange={this.onGroupChange} value={this.state.checkedList} style={{ width: '100%', marginLeft: '5%', fontWeight: 'lighter' }}>
</Checkbox.Group>
</div>
);
}
}
and this is similar to your approach but as we cant predict number of options, I would opt for above way instead of below one.
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
checkedList: [],
checkAll: false,
};
}
render() {
return (
<div>
<div style={{ borderBottom: '1px solid #E9E9E9' }}>
<Checkbox
onChange={this.onCheck}
checked={this.state.checkAll}
>
Check all
</Checkbox>
</div>
<br />
<Checkbox.Group value={this.state.checkedList} onChange={this.onGroupChange} >
<Checkbox value={101}>option 1</Checkbox>
<Checkbox value={102}>option 2</Checkbox>
</Checkbox.Group>
</div>
);
}
onGroupChange = (checkedList) => {
this.setState({
checkedList,
});
}
onCheck = (e) => {
this.setState({
checkedList: e.target.checked ? [101,102] : [],
checkAll: e.target.checked,
});
}
}