Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

useFieldArray keep value when appending after removing

See original GitHub issue

Describe the bug In my defaultValues, I have an array of values that I want to render using useFieldArray. It render correctly, but when I remove the last item and append a new item (calling append without arguments), it renders with the value from defaultValue.

To Reproduce Steps to reproduce the behavior:

Go to https://codesandbox.io/s/react-hook-form-usefieldarray-template-e7x5l
Click on delete button from the second line
Click on append button
The controlled component get value from defaultValues

Additional context Not sure if it’s a bug or intentional

Issue Analytics

State:
Created 3 years ago
Comments:7 (3 by maintainers)

Top GitHub Comments

1reaction

danielnakamashicommented, Jul 24, 2020

Oh, ok. So it’s not a bug. Thanks for fast reply!

0reactions

pstoicacommented, Mar 7, 2022

hello @bluebill1049 i am using useFieldArray, when appending normally everything works,but when trying to remove any populated form then appending, the new appended form is being populated by data from the removed form

I’m having the same issue. I believe it might be similar to https://github.com/react-hook-form/react-hook-form/issues/7935

Apologies, I don’t have time to make a codesandbox yet. But I am using useFieldArray. It works with register, but not <Controller />.

Top Results From Across the Web

UsefieldArray react hook form deleting the last element only

Basically I'm trying to append and delete but the problem is when I'm deleting its deleting only the last element. append is working...

useFieldArray - Simple React forms validation

In case of validation error, the root property is appended to formState.errors? ... solution: the remove action is happened after the second render...

Effective forms: building dynamic array fields with useFieldArray

Using append to push values to the array; Getting the current value of any field with watch and useWatch; Applying remove to remove...

Form - Atom Learning

Dynamic fields - useFieldArray() · fields : fields is an object keeping all the dynamic fields stored in the field array. · append...

Creating recursive and dynamic forms with React Hook Form ...

Using the useFieldArray hook. In our form, we have the friends array. In our case, we want users to be able to add,...