👀 Views: 76 💬 Answers: 1 📅 Created: 2025-08-30

react react-hook-form forms JavaScript

I'm experimenting with I'm currently using React Hook Form v7 to manage a nested form structure, but I'm running into problems when trying to handle nested inputs. I have a form that includes a dynamic list of items, each with its own set of inputs. When I submit the form, the values for the nested fields aren't being captured correctly. Instead of getting an array of items with their respective values, I'm getting an empty array for the nested fields. Here's a simplified version of what my code looks like: ```javascript import React from 'react'; import { useForm, useFieldArray } from 'react-hook-form'; const MyForm = () => { const { control, handleSubmit } = useForm({ defaultValues: { items: [{ name: '', quantity: 0 }], }, }); const { fields, append, remove } = useFieldArray({ name: 'items', control }); const onSubmit = (data) => { console.log(data); }; return ( <form onSubmit={handleSubmit(onSubmit)}> {fields.map((item, index) => ( <div key={item.id}> <input {...register(`items.${index}.name`)} defaultValue={item.name} placeholder="Item Name" /> <input {...register(`items.${index}.quantity`)} defaultValue={item.quantity} type="number" placeholder="Quantity" /> <button type="button" onClick={() => remove(index)}> Remove </button> </div> ))} <button type="button" onClick={() => append({ name: '', quantity: 0 })}> Add Item </button> <button type="submit">Submit</button> </form> ); }; export default MyForm; ``` When I submit the form, the console logs an object like `{"items":[]}` instead of the expected structure with the input values. I've ensured that the inputs are properly registered with the `register` function, and I'm using the `defaultValue` prop to set initial values for the inputs. I've also tried using `useEffect` to watch for changes in the fields and re-rendering them, but that didn't help. Is there something I'm missing in how to structure the nested fields or how to register them properly? Any insights on common pitfalls with React Hook Form and nested fields would be greatly appreciated! The project is a mobile app built with Javascript. I'm working in a Linux environment.