How to validate multistep form in react

Question

I have a multi-step form, which I am making using react, to work on validation I am using react-hook-form.

I have already achieved 90% of things just one

Answer 1

You can create an array of 2 empty strings where first one represents first row F name,and second one represents first row S Name under yours inputHolder in the MainComponent:

 const [inputHolder, setinputHolder] = useState([
    {
      id: 1,
      fname: "",
      sname: ""
    }
  ]);
  const [names, setNames] = useState(["", ""]);

Next,every time the user ads a new row you add to empty strings in names array.

 const addRow = () => {
    console.log(inputHolder.length);
    let item = {
      id: inputHolder.length + 1,
      fname: "",
      sname: ""
    };
    setinputHolder([...inputHolder, item]);
    setNames([...names, "", ""]);
   
  };

Where each empty string represents F name and S name. Finally,fields is set to names in second form:

fields: names,
      component: (register, errors, defaultValues) => (
        <Form2
          register={register}
          errors={errors}
          defaultValues={defaultValues}
          inputHolder={inputHolder}
          addRow={addRow}
        />

Answer 2

I recommend you to use yup as a validation utils. It is a powerful tool.

1. Create two schemes for both of forms:

 import * as yup rom 'yup';
    
 const schema = yup.object().shape({
   field1: yup.string().required() // number, array - whatever,
   field2: yup.string().required(),
 })

Similar schema should be created for second form as well

2. Create first form and apply your validators by resolver

import { yupResolver } from '@hookform/resolvers/yup';

const { register, handleSubmit } = useForm({
  resolver: yupResolver(schema),
});

3. Do the same for your second form - useForm + validation resolver.

4. next part is to make your second form being dynamic, so do use hook useFieldArray

const { fields, append, remove } = useFieldArray({
  name: 'userInfo', *// key, a part of path to access your fields - userInfo[n].fname*
  control: form.control, *// to connect you fields to basic form* 
});

5. Now you can create actions*(buttons/links)* and pass them {append, remove} actions.

6. {fields} should be rendered by .map as default. once you will try to validate your second form with (n) count off section - your schema would be applied to each of sections.

there is another solution, you can skip part with second form(I would prefer this way if your second schema could be massive).

you can connect your useFieldArray fields to first form, and your single validation schema looks like:

 import * as yup rom 'yup';
    
 const infoSchema = yup.object().schema({
   firstName: yup.string(),
   lastName: yup.string(),
 })

 *// enhance infoSchema to your expected logic.* 

 const schema = yup.object().shape({
   field1: yup.string().required() // number, array - whatever,
   field2: yup.string().required(),
   userInfo: yup.array().of(infoSchema),
 })