useFieldArray using index as value of an input

[wojtekow]

Should it be possible to always update the value of one of the hidden inputs with the value of the current index of fields iteration:

<Input  {...register(`some.nested.field.${i}.ordering`,
            {
               valueAsNumber: true,
            }
        )}
        type="number"
        value={i + 1}
  />

The above does not seem to work (the value does not get updated)

CSB: https://codesandbox.io/s/react-hook-form-usefieldarray-forked-j83yco?file=/src/index.js

Please add a couple of items, change their first name and last name to be more distinguishable and then click the "Swap" button followed by "Submit".

In the console you'll see that the submitted object has the "order" attributes messed up, even though in the UI it seems that they are always kept in correct order (1st column).

[Moshyfawn]

You're mixing the concept of controlled vs uncontrolled input by providing the value prop to a "registered" input element.

Notice that the change event's not firing when the field array is re-rendered after the swap operation, so the new index value is not updated in the RHF state.

You want to manually update the field

• either by calling setValue on the index change
• or convert your hidden input into a controlled input and pass the index into it's onChange handler