update method for useFieldArray

[bluebill1049]

Context

The current API to update the field array is using setValue, which can b performed by the following API.

setValue('fieldArray', [
  ...updatedFieldArrayValue
])

setValue('fieldArray.0.test', data)

The setValue method then needs to look up the fields reference to identify its field array inputs or normal inputs.

Problem

However, the current setValue API doesn't actually re-render the useFieldArray which causes confusion when developers assume it will behave similarly to the rest of useFieldArray's API, such as append, prepend and etc.

---

Feature request

#5728

---

Proposal

Ideally, we should have an update function to update the field array and trigger a re-render to the userFieldArray.

const { update } = useFieldArray();

update(0, data); // update an individual field array node

// it possible to call multiple time as well
update(0, data);
update(1, data);

the action itself will trigger a re-render to the entire field array and update all its references.

---

PR

#5835

[jhg023]

Being able to update an individual field array node using its index will be very useful to me (and presumably many others). Thank you!

[bluebill1049]

Thanks for sending the feature request as well.

[thanh-nguyen-95]

It's a huge yes for me. I'm looking forward to it.

Btw, there's a missing ) at the end of update([...fieldArrayData]).

[bluebill1049]

Thanks 👍 will get that sorted.

[bluebill1049]

cc @kotarella1110 @jorisre

[jorisre]

💯 agree

[kotarella1110]

This is great feature 🎉
agree 👍

[wdfinch]

This is great. I use setValue all the time to change field array elements and this makes it so much easier.

[wdfinch]

In order to use this method, I'm assuming that all elements of the field array need to be mounted correct?

[bluebill1049]

I will write a test and let you know. I don't think we need to mount the inputs.

[behzadmehrabi]

thanks man, I'm having the exact same issue :))

[bluebill1049]

This feature is released. 7.11.0 you can refer to the release note and change log.

[jhg023]

Thank you again for prioritizing this feature. I just tested the latest version and it fixed the initial issue that I faced (which was what prompted me to create the feature request in the first place).

[Mana-COMO]

I would be much appreciated if you could show me how to use this {update} code sample🙏🙏🙏

[cbdeveloper]

What if there are async updates (and the indexes could change during the async cycle) ?
Can't we update by id?

#8151

[Dragomir-Ivanov]

Then you find that index you need!

The way I do with current RHF:

  const { fields, append, remove, update } = useFieldArray({
    ......
    keyName: "_keyId",
  })

....
const handleClose = useCallback(
    (asset: Asset | undefined) => {
      if (asset) {
        if (asset.id) {
          const idx = fields.findIndex((f) => f.id! === asset.id)
          if (idx !== -1) {
            update(idx, asset)
          }
        } else {
          asset.id = generateId()
          append(asset)
        }
      }
    },
    [fields, append, update]
  )

#8151

[sahil-1912]

How can i use field array id for setting different rendering condition for rendering the element different way?
To be precise i got nested form and depending on the drop down in main array i want to show "add more option" from nested array.

[leapful]

@sahil-1912

Please open a new discussion as your question might be not related to this discussion.