React Hook Forms - Adding Dynamic Rows of Fields - reactjs

Question

I'm using React Hook Form library. https://react-hook-form.com
If it's a simple form like Student Name, and Student Age, the application is quite simple.
const { register, handleSubmit, formState: { errors } } = useForm();
I just create those two input fields and register them.
<div className="w-full flex flex-col mt-4">
<label>Name</label>
<input
type="text"
placeholder="Enter Name" {...register("name")}
/>
</div>
<div className="w-full flex flex-col mt-4">
<label>Age</label>
<input
type="text"
placeholder="Enter Age" {...register("age")}
/>
</div>
<div>
<button onClick={handleSubmit(submitData)}>
Update
</button>
</div>
The submitData function will get the formData which can be used. The handleSubmit binds the registered fields to formData
const submitData = async formData => {
console.log(formData)
}
The formData will look as below:
{"name":"test", "age":"27"}
My requirement is to make this form dynamic, by allowing me to add many students. I should be able to repeat a set of these fields with a button called "Add Student". Every time I add a new student, it should create a new row of these two fields where I can add new students names. finally, the output of the formData should look like an array of students:
[{"name":"test1", "age":27},{"name":"test2", "age":28},{"name":"test3", "age":29} ]
I can create the UI to add the new fields, but I don't know how to bind them to the formData in react hook form. In the documentation, I couldn't find how to do this with react hook form.
Please help.

Answer 1

I tried the following:
I created a state as follows:
const [items, setItems] = useState([0,1,2])
I can update this when I add/remove items.
Now, for the fields, I wrapped them into a map as follows:
{items.map(i => (
<div>
<div className="w-full flex flex-col mt-4">
<label>Name</label>
<input
type="text"
placeholder="Enter Name" {...register(`items[${i}].name`)}
/>
</div>
<div className="w-full flex flex-col mt-4">
<label>Age</label>
<input
type="text"
placeholder="Enter Age" {...register(`items[${i}].age`)}
/>
</div>
</div>
))}
This works.