I am using ANT Checkboxes and GroupBox, i need to have ability to check and uncheck all checkboxes at once.
In order to do that i used ANT recomended way of implementation checkboxes GroupBox.
Everything worked great but i can't now asing values in checkboxes and there no documentation about it on ANT website.
For instance when i use array of strings everything works but when i use array of objects which is also recomended to use on ANT it doens't work.
If i asing variable this everything works
const plainOptions = ['Apple', 'Pear', 'Orange'];
But when i use it with objects it doens't
const plainOptions = [{label: 'Apple', value: '1'}, {label: 'Orange', value: '2'}];
I don't understand it what's is the point of using checkboxes if they can't have values :
import React, { useState } from 'react';
import { Card, Button, Space, Row, Col, Input, Select, Modal, Checkbox, Form } from 'antd';
const { Option } = Select;
const CheckboxGroup = Checkbox.Group;
const Content= () => {
const plainOptions = ['Apple', 'Pear', 'Orange']; //This works
//This doesn't work, but it should.
//const plainOptions = [{label: 'Apple', value: '1'}, {label: 'Orange', value: '2'}];
const defaultCheckedList = [];
const [checkedList, setCheckedList] = useState(defaultCheckedList);
const [indeterminate, setIndeterminate] = useState(true);
const [checkAll, setCheckAll] = useState(false);
const onChange = list => {
setCheckedList(list);
setIndeterminate(!!list.length && list.length < plainOptions.length);
setCheckAll(list.length === plainOptions.length);
};
const onCheckAllChange = e => {
setCheckedList(e.target.checked ? plainOptions : []);
setIndeterminate(false);
setCheckAll(e.target.checked);
};
return(
<div>
<Checkbox
indeterminate={indeterminate}
onChange={onCheckAllChange}
checked={checkAll}
>
All
</Checkbox>
<CheckboxGroup
className="vertical-checkbox-group"
options={plainOptions}
value={checkedList}
onChange={onChange}
/>
</div>
)
}
export default Content; Does anyone maybe know how to do it properly? , i know also some people do it with for loop but i afraid it's wrong way of implementation and it make create new issues. Using objects with labels and values is also recomended way of implementetion by ANT but it doesn't work for GroupBox.