handle validation on child component for the the form in the parent component the react-hook-form and usefieldarray

Question

I'm new to react and i'm stuck in a situation. The application i'm currently working on has multiple sections say section 1 ,section 2, ... Each of these section have form which has different fields. I'm in need to doing the validation of form present in parent component in the child component.

function App() {
return <>
//section 1 code here
<section 2/>
<section 3/>
<section 4/>
</>
}

is there a way i can pass the form data of section 1 to section 2 and validate the data upon a button click in section 2. form data of section 2 to section 3 and validate the data upon a button click in section 3. ... for other sections

i'm using the react hook form and usefieldarray for add and remove fields (dynamically)

Answer 1

You should be able to achieve this by managing the form data and validation at the parent component level and passing down the necessary data and functions to the child components. Since you are using React Hook Form, you can use the useForm hook to manage the form state and validation.
Something like this should work,

import { useForm, useFieldArray } from 'react-hook-form'

function App() {
  const { control, handleSubmit, setValue, watch, formState: { errors } } = useForm({
    // Your initial form values go here...
  })

  const { fields, append, remove } = useFieldArray({
    control,
    name: 'yourFieldName', 
  })

  const onSubmitSection1 = (data) => {
    // Handle validation logic for section 1 if needed

    // Set form data for section 1
    setValue('yourFieldName', data.yourFieldName)

    // Move to section 2
    // You can add more logic here if needed
  }

  const onSubmitSection2 = (data) => {
    // Handle validation logic for section 2 if needed

    // Set form data for section 2
    setValue('yourFieldName', data.yourFieldName)

    // Move to section 3
    // You can add more logic here if needed...
  }

  // Repeat this pattern for other sections as needed

  return (
    <>
      // Section 1 
      <form onSubmit={handleSubmit(onSubmitSection1)}>
        // Your form fields for section 1 
        {fields.map((item, index) => (
          // Render your form fields using React Hook Form methods
          // For example, use `Controller` for each field
        ))}

        // Button to move to section 2 
        <button type="submit">Next</button>
      </form>

      // Section 2 
      {watch('yourFieldName') && (
        <form onSubmit={handleSubmit(onSubmitSection2)}>
          //  Your form fields for section 2 
          {fields.map((item, index) => (
            // Render your form fields using React Hook Form methods
          ))}

          // Button to move to section 3 
          <button type="submit">Next</button>
        </form>
      )}

      // Repeat similar pattern for other sections 
    </>
  )
}

export default App