title: How to validate multistep form in react
body: <p>I have a multi-step form, which I am making using react, to work on validation I am using <code>react-hook-form</code>.</p>
  <p>I have already achieved 90% of things just one thing I am facing the issue is getting the second form data which is dynamic.</p>
  <p><strong>What I am doing is</strong></p>
  <ul>
  <li>In my first form I have two fields when those are filled (validated) I am going to the next form</li>
  <li>In my next form I have two input fields and on the add button user can add multiple rows of fields as well and these are working fine</li>
  </ul>
  <p><strong>issue</strong></p>
  <ul>
  <li>Now when I create new fields in the second form I want to validate them but not getting an idea how can I do that.</li>
  </ul>
  <p><strong>What I have done</strong></p>
  <p>In my main component, I am doing this for validation</p>
  <pre><code>const forms = [
    {
      fields: ['desig', 'dept'],
      component: () =&gt; (
        &lt;Pro register={register} errors={errors} defaultValues={defaultValues} /&gt;
      ),
    },
    {
      fields: [
        `userInfo[0].fname`, // here I am facing issue if I am statically putting 0,1 then it is validating that perticular form
        `userInfo[0].sirname`,
      ],
      component: () =&gt; (
        &lt;Basic
          register={register}
          errors={errors}
          defaultValues={defaultValues}
          inputHolder={inputHolder}
          deleteRow={deleteRow}
          addRow={addRow}
        /&gt;
      ),
    },
  ];
  
  </code></pre>
  <p>On click of submitting, I am doing this</p>
  <pre><code>const handleSubmit = (e) =&gt; {
    triggerValidation(forms[currentForm].fields).then((valid) =&gt; {
      if (valid) {
        console.log('whole form data - ', JSON.stringify(defaultValues));
      }
    });
  };
  </code></pre>
  <p>and here i want data as like below if two data is added in form2</p>
  <pre><code>    {
    &quot;fname&quot;: &quot;dsteve&quot;,
    &quot;sname&quot;: &quot;smith&quot;,
    &quot;userInfo&quot;: [
      {
        &quot;desig&quot;: &quot;ddd&quot;,
        &quot;dept&quot;: &quot;deptee&quot;
      },
      {
        &quot;desig&quot;: &quot;ddd&quot;,
        &quot;dept&quot;: &quot;deptee&quot;
      }
    ]
  }
  </code></pre>
  <p>I have done everything but here only I have been stuck, I know where the issue is</p>
  <p>Instead of this</p>
  <pre><code>fields: [&quot;fname&quot;, &quot;sname&quot;],
  </code></pre>
  <p>I have to do like this</p>
  <pre><code>fields:[`userInfo[0].name, `userInfo[0].sname],
  </code></pre>
  <p>This 0-1 I have to make dynamic as per indexes, I don't know what I am missing</p>
  <p>I tried mapping the fields with index through <code>inputHolder</code>but it did not work</p>
  <p><strong>Edit / Update</strong></p>
  <p>If I am doing like this</p>
  <pre><code>fields:[`userInfo[0].name`,`userInfo[1].name`, `userInfo[0].sname`,`userInfo[1].sname],
  </code></pre>
  <p>So it is taking validation for two fields, but that is manually I am doming, if user creates more fields then that should take these fields dynamically.</p>
  <p>Here is my code sandbox, which contains the full code</p>
  <p><a href="https://codesandbox.io/s/cranky-vaughan-y8tvr?file=/src/App.js" rel="noreferrer">Here is my code sandbox</a></p>
  <p><strong>I am open to use any new approach but that should use <code>react-hook-form</code> and full fill what I am trying to do</strong></p>
  <p>I don't know how to progrees with my approach now</p>