issue in dynamic Form List with collapse
You need to create a new Collapse
component on every iteration on the fields, also you need to convert start
property in your dataFromBacked
to moment object because antd's DatePicker
works with moment object as value. like this:
{fields.map((field, i) => (
<Collapse
key={i}
accordion>
<Panel ...>
<Form.Item
name={[field.name, 'start']}
label="Start"
fieldKey={[field.fieldKey, 'start']}>
<DatePicker />
</Form.Item>
<Form.Item
name={[field.name, 'money']}
label="Money"
fieldKey={[field.fieldKey, 'money']}>
<Input />
</Form.Item>
</Panel>
</Collapse>
))}
BTW in order to initialize your list with dataFromBackend
you can use it as initialValue
attribute on Form.List
component. I've implemented an example Here on stackblitz you can check it out.