useContext, useForm, and useFieldArray
I’m fortunate to have the opportunity to work with react-hook-form again. And work with it better. The following worked well for me:
// MultiStepForm.tsx import { createContext, Dispatch, SetStateAction } from 'react' import { SubmitHandler, useFieldArray, UseFieldArrayReturn, useForm, UseFormReturn, } from 'react-hook-form' interface SomeComplexInput { someKey: string someValue: string } interface MultiStepFormInput { formFieldA: string formFieldB: SomeComplexInput[] } interface OtherContext { // Other frontend-specific values e.g. active form step index } export const MultiStepFormContext = createContext( {} as UseFormReturn<MultiStepFormInput> & UseFieldArrayReturn<MultiStepFormInput, 'formFieldB', 'id'> & OtherContext, ) export const MultiStepForm = () => { const form = useForm<MultiStepFormInput>({ mode: 'all', }) // Use fieldArray.
Continue reading "useContext, useForm, and useFieldArray"