title: React Hook Form: Submit a form with nested components or extract fields of nested components to submit
body: <p>I have a form with multiple components in it (with each being either a functional or a class based component) containing multiple input fields or radio buttons. When I submit the form I either want to submit the fields that are nested into components along with the form data or I should be able to extract the fields data and then submit them (not sure which approach would be the best and why?). How can I achieve this?</p>
  <p>Code :</p>
  <pre><code>import React from &quot;react&quot;;
  import { useForm } from &quot;react-hook-form&quot;;
  
  export default function TestComponent() {
    const { register, handleSubmit, errors } = useForm();
    const onSubmit = data =&gt; console.log(data);
  
    return (
      &lt;form onSubmit={handleSubmit(onSubmit)}&gt;
        &lt;label htmlFor=&quot;name&quot;&gt;Name&lt;/label&gt;
        &lt;input type=&quot;text&quot; id=&quot;name&quot; name=&quot;name&quot; ref={register({ required: true, maxLength: 30 })} /&gt;
        {errors.name &amp;&amp; errors.name.type === &quot;required&quot; &amp;&amp; &lt;span&gt;This is required&lt;/span&gt;}
        {errors.name &amp;&amp; errors.name.type === &quot;maxLength&quot; &amp;&amp; &lt;span&gt;Max length exceeded&lt;/span&gt; }
        &lt;NestedComponent1 /&gt;
        &lt;NestedComponent2 /&gt;
        &lt;input type=&quot;submit&quot; /&gt;
      &lt;/form&gt;
    );
  }
  
  function NestedComponent1() {
      return (
          &lt;div&gt;
              &lt;input type=&quot;text&quot; id=&quot;nested-name&quot; name=&quot;nestedName&quot; /&gt;
              &lt;input type=&quot;text&quot; id=&quot;nested-name2&quot; name=&quot;nestedName2&quot; /&gt;
              &lt;input type=&quot;text&quot; id=&quot;nested-name3&quot; name=&quot;nestedName3&quot; /&gt;
          &lt;/div&gt;
      );
  }
  
  function NestedComponent2() {
      return (
          &lt;div&gt;
              &lt;input type=&quot;text&quot; id=&quot;nested-comp2-name&quot; name=&quot;nestedcomp2Name&quot; /&gt;
              &lt;input type=&quot;text&quot; id=&quot;nested-comp2-name2&quot; name=&quot;nestedcomp2Name2&quot; /&gt;
              &lt;input type=&quot;text&quot; id=&quot;nested-comp2-name3 name=&quot;nestedcomp2Name3&quot; /&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>