CODEWITHSUNDEEP
reactjsreact-hook-form
B. Fateh
B. Fateh

Reputation: 363

react hook form setValue of fieldArray not working

I'm currently facing an issue with react hook form while trying to update field Array value.

 const articlesFieldArray = useFieldArray({
   control,
   name: "articles",
 });

the issue is

//this is working as expected
setValue("articles", [{articleId: 1,  price: 100, qte: 10 }])

-after updating values from input (for example updating price to "120") and calling setValue the values are updated is rhf state but not in the ui

sandbox: "https://codesandbox.io/s/empty-breeze-z48pyr?file=/src/App.js"

Upvotes: 1

Views: 3655

Answers (2)

Nitesh
Nitesh

Reputation: 29

Use reset({articles, [{articleId: 1, price: 100, qte: 10 }]}). You can't achive this using setValue as setValue don't accept key.

https://github.com/orgs/react-hook-form/discussions/2429

Upvotes: 0

moshyfawn
moshyfawn

Reputation: 705

calling setValue the values are updated is rhf state but not in the ui

The problem you're experiencing with updating the UI's new value is because of how you set the key element in the Box component. In your example, you've set it to the array element index. React Hook Form produces internal field IDs for tracking the field array element; therefore, you must use field.id as the Box key prop.

{articlesFieldArray.fields.map((field) => <Box key={field.id}>...</Box>)}

Upvotes: 0

Related Questions