title: React Hook Forms - Adding Dynamic Rows of Fields
body: <p>I'm using React Hook Form library. <a href="https://react-hook-form.com" rel="nofollow noreferrer">https://react-hook-form.com</a></p>
  <p>If it's a simple form like Student Name, and Student Age, the application is quite simple.</p>
  <pre><code>const { register, handleSubmit, formState: { errors } } = useForm();
  </code></pre>
  <p>I just create those two input fields and register them.</p>
  <pre><code>               &lt;div className=&quot;w-full flex flex-col mt-4&quot;&gt;
                    &lt;label&gt;Name&lt;/label&gt;
                    &lt;input
                      type=&quot;text&quot;
                      placeholder=&quot;Enter Name&quot; {...register(&quot;name&quot;)}
                    /&gt;
  
                  &lt;/div&gt;
                  &lt;div className=&quot;w-full flex flex-col mt-4&quot;&gt;
                    &lt;label&gt;Age&lt;/label&gt;
                    &lt;input
                      type=&quot;text&quot;
                      placeholder=&quot;Enter Age&quot; {...register(&quot;age&quot;)}
                    /&gt;
  
                  &lt;/div&gt;
                  &lt;div&gt;
                    &lt;button onClick={handleSubmit(submitData)}&gt;
                      Update
                    &lt;/button&gt;
                  &lt;/div&gt;
  </code></pre>
  <p>The submitData function will get the <code>formData</code> which can be used. The <code>handleSubmit</code> binds the registered fields to <code>formData</code></p>
  <pre><code>const submitData = async formData =&gt; {
    console.log(formData)
  }
  </code></pre>
  <p>The <code>formData</code> will look as below:</p>
  <pre><code>{&quot;name&quot;:&quot;test&quot;, &quot;age&quot;:&quot;27&quot;}
  </code></pre>
  <p>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 &quot;Add Student&quot;. 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 <code>formData</code> should look like an array of students:</p>
  <pre><code>[{&quot;name&quot;:&quot;test1&quot;, &quot;age&quot;:27},{&quot;name&quot;:&quot;test2&quot;, &quot;age&quot;:28},{&quot;name&quot;:&quot;test3&quot;, &quot;age&quot;:29} ]
  </code></pre>
  <p>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.</p>
  <p>Please help.</p>