Antd V4 form list setFieldValue

Question

enter code hereHow can we dynamically edit an element in form list and set that element using setFieldsValue

A solution I got is call setFieldsValue for entire form List but that is not fair, cause performance issue

I have a form structure like this

users: [
  {
    name: "bob",
    education: [
      {
        qualification: "masters",
        college: "abc",
      },
      {
        qualification: "degree",
        collge: "ijk",
      },
    ],
  },
  {
    name: "alice",
    education: [
      {
        qualification: "ug",
        college: "abc",
      },
      {
        qualification: "higher secondary",
        college: "def",
      },
    ],
  },
];

implemented using form list

I want to update 'qualification' of 'education[1]' of user 'alice' using antd v4 setFieldsValue
I got a solution that is, take all values using getFieldsValue and change change 'qualification' and then update entire form value, but it causes some performance issue large applications
How to use setFieldsValue to update a single field in form?
In antd v3 it is archived by providing path in setFeildsValue like

setFieldsValue({ 'user.1.education.1.qualification':'something' })

Thanks in advance for your valuable answers

user_13090235 · Answer

In case you didn't understand @Ajish answer (like me), I'll try to explain it:

As Antd docs says, you need to pass a FieldData[] to your form.setFields() method. In my case, I need to update only one field and I only used name and value properties from FieldData. Therefore, my code was like this:

form.setFields([
  {
    name: ['products', fieldIndex, 'total-value'],
    value: totalValue,
  },
]);

Name property is a NamePath composed by:

'products': Name of my Form.List component;
fieldIndex: Index refering the object that I want to update;
'total-value': Field that I want to update.

To clarify even more, products has this format:

products: [
  {
    quantity: 0,
    'unit-value': 0,
    'total-value': 0,
   },
 ],

user_13751277 · Answer

setFields([{name:[data[0].name[0], data[0].name[1], 'component_pm'],value:5}])

Antd V4 form list setFieldValue

2 Answers