useFormContext example in Typescript with nested

[chandu]

Hi,
Can anyone provide me an example of how to leverage useFormContext in nested inputs (controlled) using typescript?
The example on the API page (@ https://react-hook-form.com/api/#useFormContext) is helpful, but am not clear how it is done in typescript using for controlled inputs.

[bluebill1049]

you mean with Controller example?

[chandu]

@bluebill1049 Yes and in typescript

[bluebill1049]

there is one in the doc: https://codesandbox.io/s/react-hook-form-v6-controller-ts-4dpm9

[abhinandkr56]

useformmethods is not working

[MetaMmodern]

@bluebill1049 the provided example is in typescript, but there is no useFormContext in that example, while that was what @chandu wanted. Any chance you got an example for that in doc? I'm currently struggling to correctly add types for defaultValues prop for my custom component. Previously it was used by passing "control" as a prop, and that worked fine with generic typing:

interface TagInputProps<
  TFieldValues extends FieldValues,
  TName extends FieldPath<TFieldValues>
> {
  control: Control<TFieldValues>;
  name: TName;
  label: string;
  defaultValue: FieldPathValue<TFieldValues, TName>;
}
const TagInput = <
  TFieldValues extends FieldValues,
  TName extends FieldPath<TFieldValues>
>({
  control,
  name,
  label,
  defaultValue,
}: TagInputProps<TFieldValues, TName>) => {
    return <Controller>{/* anything here */}</Controller>
}

But now I saw that it's better to use context instead of simply passing prop, and now typing fails, because I can pass any value to defaultValue prop and it doesn't complain.

I guess now you'd probably suggest to simply omit defaultValue and create it in useForm call, but it was not working earlier, I'll try again

UPDATE: I solved my own problem by removing defaultValue prop and even dropping useFormContext(since I don't need it actually) but TS's question is still relevant.

[fasih-mehmood]

All you have to do is pass the type of the form data you're expecting to useFormContext as in the following example:

import React from "react";
import { Controller, useForm, FormProvider, useFormContext } from "react-hook-form";

type FormData = {
  name: string;
  age: number;
}

export default function App() {
  const methods = useForm<FormData>();
  const onSubmit = (data: FormData) => console.log(data);

  return (
    <FormProvider {...methods}>
      // pass all methods into the context
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        <NestedInput />
        <input type="submit" />
      </form>
    </FormProvider>
  )
}

function NestedInput() {
  const { control } = useFormContext<FormData>(); // retrieve all hook methods

  return (
    <Controller
      control={control}
      name="age" // This will be typed correctly
      render={({ field }) => {
        return <input {...field} />
      }}
      />
  );
}

[bbreckler]

This is a bit confusing because it is not very useful to hard code the FormData type in NestedInput. This means the 'reusable' control is only good if you are using FormData.

[fasih-mehmood]

The whole point of useFormContext is to access the original form methods, but typing goes out the window if you don't provide the same type as you did in the original method. You might get away with providing a subset of the FormData in the nested input but I haven't tried that. Plus it becomes a hassle to keep track of the types in case of modifications if we do go down that route.

[andrastoth-ws]

To add a bit to think about, the conflict is coming from reusability (only knowing the right partial of a thing which can be of any size) and depending on a functionality that has strong external dependencies: you can't use useFormContext on the wrong form or without using <FormProvider />. So in many ways you can only have very limited reusability which would depend on not knowing too much about the bigger picture. That might work with an uncontrolled component like the one below, but for controlled components that interact a lot with the local component, you must specify what exact field of what exact form you are dealing with.
So we can't have everything.

I got to this far though:

type SpikeFormOptions = {
  someIdFromDropDown: string | null;
};

export function SpikeForm() {
  const methods = useForm<SpikeFormOptions>({ defaultValues: { someIdFromDropDown: null } });
  const {
    handleSubmit,
  } = methods;
  const onSubmit: SubmitHandler<SpikeFormOptions> = (data) => console.log('Submission', data, data.someIdFromDropDown);

  return (
    <FormProvider {...methods}>
      <form onSubmit={handleSubmit(onSubmit)}>
        <MyLittleDropDown<SpikeFormOptions> nameInForm="someIdFromDropDown" />
        <button type="submit">Submit</button>
      </form>
    </FormProvider>
  );
}

interface MyLittleDropDownProps<TFieldValues extends FieldValues> {
  nameInForm: FieldPath<TFieldValues>;
}

function MyLittleDropDown<TFieldValues extends FieldValues>({
  nameInForm,
}: MyLittleDropDownProps<TFieldValues>) {
  // bring your own data
  const options: Option = [];

  const { setValue, control } = useFormContext<TFieldValues>();

  function onOptionChange(option: Option | null) {
    // this one is semi-ugly, it would be great, if I could specify somehow that _this_ particular form snippet
    // only works with `string | null` types, but I could not.
    setValue(nameInForm, (option?.value || null) as TFieldValues[typeof nameInForm]);
  }

  return (
    <Controller
      name={nameInForm}
      control={control}
      render={({ formState: { errors } }) => (
        <Select
          placeholder="Please select something"
          onChange={onOptionChange}
          options={options}
          {/* this is also ugly, probably there should be a better way than this*/}
          error={errors[nameInForm]?.message as string}
        />
      )}
    />
  );
}

[slaymance]

My use case which led me to seeking out this discussion is creating reusable components that call useFormContext and won't know what FieldValues are being used by its parent. The best way I've found to do this is to define these components with generic types that extend the FieldValues type that can then be passed by the parent component. It's not as elegant as the automatic type safety you get from invoking useForm<FieldValues>(), but it gets the job done.

Here's an example where the reusable component accepts a name prop which will be used to register the input:

import React from "react";
import {
  FormProvider,
  useForm,
  useFormContext,
  type FieldValues,
  type Path,
} from "react-hook-form";

type FormData = {
  name: string;
  age: number;
}

export default function App() {
  const methods = useForm<FormData>();
  const onSubmit = (data: FormData) => console.log(data);

  return (
    <FormProvider {...methods}>
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        <NestedInput<FormData> name="name" /> // note that we call NestedInput with the FormData type
        <input type="submit" />
      </form>
    </FormProvider>
  )
}

function NestedInput<TFieldValues extends FieldValues>({ name }: { name: Path<TFieldValues> }) {
  const { register } = useFormContext<TFieldValues>();
  return <input {...register(name)} />;
}

In the above example, <NestedInput> is passed the FormData type which will give type safety to the name prop passed to NestedInput, ensuring it matches a field from the FormData type.

Alternatively, you may want to define your component with a set name value and you want to ensure the field values of the parent account for that:

import React from "react";
import {
  FormProvider,
  useForm,
  useFormContext,
  type FieldValues,
  type Path,
} from "react-hook-form";

type FormData = {
  name: string;
  age: number;
}

export default function App() {
  const methods = useForm<FormData>();
  const onSubmit = (data: FormData) => console.log(data);

  return (
    <FormProvider {...methods}>
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        <NestedInput<FormData> /> // note that we call NestedInput with the FormData type
        <input type="submit" />
      </form>
    </FormProvider>
  )
}

interface NestedInputValues extends FieldValues {
  age: string;
}

function NestedInput<TFieldValues extends NestedInputValues>() {
  const { register } = useFormContext<TFieldValues>();
  const name = 'age' as Path<TFieldValues>;
  return <input {...register(name)} />;
}

In this example, by passing the FormData type to <NestedInput>, we have type safety ensuring that FormData includes age value since it's used to register the input in NestedInput.

The main downside is if your components are deeply nested then you'll need to prop drill the type all the way down from the form level.