I have created a Checkbox.Group using ant design, based on the values from API, the following checkboxes should get checked.
const options = [
{ label: 'Apple', value: 'Apple' },
{ label: 'Pear', value: 'Pear' },
{ label: 'Orange', value: 'Orange' }
];
const valuesFromApi = ['Apple', 'Pear'];
ReactDOM.render(
<div>
<Checkbox.Group
options={options}
onChange={onChange}
value={valuesFromApi}
/>
</div>,
document.getElementById('container')
);
You need to specify value property for Checkbox-Group
value - Used for setting the currently selected value.
const options = [
{ label: 'Apple', value: 'Apple' },
{ label: 'Pear', value: 'Pear' },
{ label: 'Orange', value: 'Orange' }
];
const valuesFromApi = ['Apple', 'Pear'];
ReactDOM.render(
<div>
<Checkbox.Group
options={options}
onChange={onChange}
value={valuesFromApi}
/>
</div>,
document.getElementById('container')
);
I have made a working example for you.
What it does is give you the ability to store the checked values from the CheckBox Group and store them in the state for possible future use.
Please let me know if something is not clear enough.
PS: I have used destruction for defining variables.
