The data I receive from the backend looks something like this:
const pronounsExample = [
[
{
id: '62f51edbbd529a9306052013',
title: 'He / Him / His',
},
],
[
{
id: '62f51ef8bd529a9306052014',
title: 'She / Her / Her',
},
],
]
I use Form.List whenever I have an array of objects but the above value is different, because it is array inside an array and then an object inside, I would like to build a form Item so that users can manipulate these values and the Form should return the requred data in the above format:
Here is what I use when I have an Array of Objects:
<Form.List name="pronouns" initialValue={data?.pronouns}>
{(fields, { add, remove }) => {
console.log('List Fields', fields)
return (
<div>
<Row gutter={[16, 16]} justify="end">
<Col>
<Button onClick={() => add()} className="mb-2">
<PlusOutlined /> {messages.buttons.add}
</Button>
</Col>
</Row>
{fields.map((field) => (
<Row key={field.key} gutter={[16, 16]}>
<Form.Item name={[field.name, 'id']} hidden>
<Input />
</Form.Item>
<Col flex={1}>
<Form.Item name={[field.name, 'nameTranslate']}>
<Input />
</Form.Item>
</Col>
<Col>
<Button
type="danger"
onClick={() => remove(field.name)}
disabled={fields.length === 0}
icon={<DeleteOutlined />}
/>
</Col>
</Row>
))}
</div>
)
}}
</Form.List>
helpful links:
Let's say, I guess your problem is converting an array of arrays of objects to an array of object, right?
If yes, my solution is:
let filteredArray = [];
for (let i = 0; i < pronounsExample.length; i++){
filterdArray.push([...pronounsExample[i]])
}
So, initialValues = filteredArray[0]