resolvers@5: Passing form parts around to different components

[Sparticuz]

I'm working on understanding the changes on v5 of the resolvers. How am I able to do this in v5?

If v5 removes the types from useForm, what do I do to pass the type to another component?

Generic type 'UseFormSetValue' requires 1 type argument(s).ts(2314)

import { useForm, UseFormSetValue } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";

// old type
type FormValues = {
  firstName: string;
};

const schema = z.object({
  firstName: z.string().min(1, "First name is required"),
});

const ButtonToSetValue = ({ set }: { set: UseFormSetValue }) => {
  return (
    <button
      onClick={() => {
        set("firstName", "Jane");
      }}
    >
      Set Value
    </button>
  );
};

function App() {
  const { handleSubmit, register, setValue } = useForm({
    defaultValues: {
      firstName: "John",
    },
    resolver: zodResolver(schema),
  });

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <div className="card">
      <form onSubmit={handleSubmit(onSubmit)}>
        <input {...register("firstName")} placeholder="First Name" />
        <ButtonToSetValue set={setValue} />
        <input type="submit" />
      </form>
    </div>
  );
}

export default App;

If I specify the type, doesn't that disregard the entire update to v5?

[BrendanC23]

You need to pass the generic parameter type to UseFormSetValue<FormValues>. Otherwise, there is no way for ButtonToSetValue to know what the form schema is.

const ButtonToSetValue = ({ set }: { set: UseFormSetValue<FormValues> }) => {
  return (
    // ...
  );
};

This doesn't have anything to do with resolvers V5, which only updated how generics are handled with useForm. The set function doesn't care about the resolver, just the form schema type.

See this CodeSandbox.

[Sparticuz]

I guess I'm asking if FormValues doesn't exist, because useForm is inferring the types, what do I do?

I'm referring to the note that in resolvers v5, it's best to let useForm do the type inference instead of explicitly defining the types.

Reading your comment and writing my response got me thinking though, and I think this is the solution.

const ButtonToSetValue = ({ set }: { set: UseFormSetValue<z.infer<typeof schema>> })

Though this also leaves me wondering how to correctly type data in onSubmit

[BrendanC23]

That seems like the right approach. You can do something similar for onSubmit, where you use Zod to infer the output type:

const schema = z.object({
    firstName: z.string().min(1, "First name is required"),
});

type InputSchema = z.input<typeof schema>;
type OutputSchema = z.output<typeof schema>;

export default function App() {
    const { handleSubmit } = useForm({
        defaultValues: {
            firstName: "John",
        },
        resolver: zodResolver(schema),
    });

    const onSubmit = (data: OutputSchema) => {
        console.log(data);
    };

    return <form onSubmit={handleSubmit(onSubmit)}></form>;
}