Update values in useFieldArray from outside form

Hi,

I’m not sure if I’m doing something wrong, or that I’ve found a bug. Within my project I’m using a useFieldArray which contains categories. I can insert a category from a modal. This works fine. But when I try to update the value of this category nothing happens when I use setValue, or the fields are removed when I reset the values baesd on getValues() because the categories aren’t an array yet, but save as categories[0].title: "test".

You can find my simplified use case over here: https://codesandbox.io/s/old-glitter-wffzq Only works for one value now because I’d hardcode the index in handleUpdate

How to update a value correctly from outside the form? Thanks in advance for your help!

[rnnyrk]

@bluebill1049 No worries about being a but later. We’re all human haha 😃

Taken from your example;

You can see the input value being updated, but the logs and the “test” behind the the input still showing the old value.

My use case is that I add a category of useFieldArray from within a modal. Then the category title isn’t shown in an input, but as title of a block.

So the red circle is the title from the useFieldArray, but to actually save the value (and the order) within the useFieldArray I use a hidden input. I use hidden inputs because I have to send the values to my backend

So my code looks like:

      {fields.map((field, index) => {
        return (
          <EditionsCategory key={`edition_category_${index}`}>
            <Input
              name={`categories[${index}].title`}
              type="hidden"
              defaultValue={field?.title}
              register={register()}
              noFieldset
            />
            <Input
              name={`categories[${index}].order`}
              type="hidden"
              defaultValue={index}
              register={register()}
              noFieldset
            />

            <EditionsCategoryHeader
              title={field?.title}
              handleDelete={() => handleDeleteCategory(index)}
              handleEdit={() => handleEditCategory(field.title, index)}
              handleMove={(direction) => handleMoveCategory(direction, index)}
            />
            <EditableTable
              columns={memoHeaderCustomCategory}
              data={[]}
              newRowForm={AddCustomCategoryForm}
            />
          </EditionsCategory>
        );
      })}

The green circle opens a modal to edit the title value which is prefilled within the modal. When I save the edit modal the handleUpdate from the codesandbox is triggered. But as seen in both codesandbox examples the field.title isn’t updated correctly.

Hope you understand my use case and issue now 😃

[bluebill1049]

thank you @rnnyrk it’s just a bit easier for me to take a look tonight.