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.

Value isn't passed to Controller after using useFieldArray's append

See original GitHub issue

Describe the bug I’m using useFieldArray and mapping that array to show multiple TextFields. But when I called useFieldArray’s append function with a new value, that new value is added to the form but it isn’t passed as value to the new input. I added some console logging to the codesandbox to show what I’m saying.

To Reproduce Steps to reproduce the behavior:

Go to sandbox example linked below
Click on the append button
The new TextField should show the new value, but it isn’t showing.

Codesandbox link (Required) https://codesandbox.io/s/react-hook-form-usefieldarray-forked-eefkf?file=/src/index.js

Expected behavior I expected the new TextField to receive the new value as value, but it isn’t receiving it.

Desktop:

OS: MacOS Big Sur 11.2.3 (20D91)
Browser: Chrome
Version: 89.0.4389.90 (Official Build) (x86_64)

Additional context I also noted something else that might be related with this. https://codesandbox.io/s/simple-mmtbq?file=/src/index.js When I rerender a component (with a state update for example) that uses useFieldArray, form.getValues() and form.watch() show an empty array. fields is still looking fine, but I find it weird that the previous values are gone from the form. Is that ok or am I missing something?

I’m using v7.1.1