How to fill value from API to checkbox.Group with antd

I have an array menu to render all the checkbox and and a data object retrieved from the api.

Currently I want when the return data is true, it will be checked

The difficulty data to display here is the key keyword to identify, if according to antd example, it is just an element array without a key.

I know Checkbox.Group has 1 attribute value to fill data, but I don't know how to deal with it , pls help me

  const menu = [
{
label: "System",
level: 1,
view: true,
add: true,
edit: true,
del: true,
key: "agmdb"
},
{
label: "Agent",
level: 1,
view: true,
add: true,
edit: true,
del: true,
key: "agent"
},
{
label: "User",
level: 2,
view: true,
add: true,
edit: true,
del: true,
key: "users"
}
];

Data object retrieved from the api:

  let userPermission = {
agent: { view: true, edit: true, del: false, add: false },
agmdb: { view: true, edit: false, del: true, add: false },
users: { view: true, edit: false, del: false, add: true }
};

Render Menu:

 const onChangeCheckbox = (arr, key) => {
console.log(arr);
};
<div className="App">
{menu.map((item) => {
let arrKey = [
userPermission[item.key]?.view ? `view` : "",
userPermission[item.key]?.add ? `add` : "",
userPermission[item.key]?.del ? `del` : "",
userPermission[item.key]?.edit ? `edit` : ""
];
return (
<Form>
<Form.Item
style={{ margin: "10px 0" }}
key={item.label}
labelCol={{
span: 6
}}
wrapperCol={{
span: 12
}}
label={item.label}
>
<Checkbox.Group
onChange={(e) => {
onChangeCheckbox(e, item.key);
}}
value={arrKey}
>
<Checkbox value="view">
View
</Checkbox>
<Checkbox value="add">
Add
</Checkbox>
<Checkbox value="del">
Delete
</Checkbox>
<Checkbox value="edit">
Edit
</Checkbox>
</Checkbox.Group>
</Form.Item>
</Form>
);
})}
</div>

example code : https://codesandbox.io/s/busy-pine-n0iku4?file=/src/App.jsx

*UPDATE: i have add the value to checkbox.Group and it filled the data when checking the condition, there is a new problem that can't check another box, you can see it in codesanbox

use name instead of value in checkbox component.

<Checkbox name="view">

and use form hook ...

const [form] = Form.useForm();
<Form form={form}>

and u should use

form.setFieldsValue()

to fill inputs

To make it work using Form, you need to specify name prop to Form.Item. In your case, name will be agmdb, agent, users.

In useEffect, get all the userPermissions and store it in a state if required. Checkbox group value format should be an array of string ['view', 'edit']. But userPermission have a different format where value is key value pair. So we need to filter out those keys that have value true.
Then set the values in form. Since each Checkbox.Group have 4 options so i created an options array of label and value. You can also use disabled in options if you need that. On submit, you may required the original data format. I also write a code that will convert the values into original format.
Hope this solves your problem

import { useEffect } from 'react';
import { Button, Checkbox, Form } from 'antd';
const menu = [
{ label: 'System', level: 1, view: true, add: true, edit: true, del: true, key: 'agmdb' },
{ label: 'Agent', level: 1, view: true, add: true, edit: true, del: true, key: 'agent' },
{ label: 'User', level: 2, view: true, add: true, edit: true, del: true, key: 'users' }
];
const userPermission = {
agent: { view: true, edit: true, del: false, add: false },
agmdb: { view: true, edit: false, del: true, add: false },
users: { view: true, edit: false, del: false, add: true }
};
const options = [
{ label: 'View', value: 'view' },
{ label: 'Add', value: 'add' },
{ label: 'Edit', value: 'edit' },
{ label: 'Delete', value: 'del' }
];
const App = () => {
const [form] = Form.useForm();
useEffect(() => {
// Fetch userPermission from API
// Each Checkbox.Group value is an array of string (true means checked)
// Example: { agmdb: ['view', 'del'], agent: ['view'], users: ['view', 'add'] }
const data: Record<string, Array<string>> = {};
Object.entries(userPermission).forEach(([key, value]) => {
data[key] = Object.keys(value).filter((key) => value[key as keyof typeof value]);
});
form.setFieldsValue(data);
}, [form]);
const onFinish = (values: any) => {
const finalData: Record<string, Record<string, boolean>> = {};
Object.entries(values).forEach(([key, value]: any) => {
finalData[key] = value.reduce((acc: any, cur: string) => {
acc[cur] = true;
return acc;
}, {});
});
console.log(finalData);
};
return (
<div className='App'>
<Form form={form} onFinish={onFinish}>
{menu.map((item) => {
return (
<Form.Item
key={item.key}
style={{ margin: '10px 0' }}
labelCol={{ span: 6 }}
wrapperCol={{ span: 12 }}
label={item.label}
name={item.key}
>
<Checkbox.Group options={options} />
</Form.Item>
);
})}
<Button htmlType='submit'>Submit</Button>
</Form>
</div>
);
};
export default App;