I am using "react-hook-form": "^7.39.5"
and couldn't figure out how to correctly set the type of register.
index.tsx
const Index = () => {
const {
register,
handleSubmit,
formState: { errors },
getValues,
setValue,
} = useForm<FormInputs>({
resolver: yupResolver(formSchema),
})
const onSubmit = (data: FormInputs) => console.log(data)
return(
<FormInput
label={label}
register={{ ...register('firstName') }}
errorMessage={errors['firstName']?.message}
/>
)
export default React.memo(Index)
}
FormInput.tsx
type FormInputProps = {
label: string
register: any // <-- I NEED THIS TO BE TYPED
errorMessage?: string
type?: string
}
const FormInput = ({ label, register, errorMessage, type }: FormInputProps) => {
return (
<FormLayout errorMessage={errorMessage}>
<TextField
label={label}
{...register}
fullWidth
size="small"
type={type ?? undefined}
error={errorMessage && errorMessage?.length > 0}
/>
</FormLayout>
)
}
export default React.memo(FormInput)
I need register from the FormInputProps to by typed instead of "any". I tried several things to give the correct type but it can't just helped
CodePudding user response:
You can use built-in type from react-hook-form
called UseFormRegisterReturn
and the other point I see in the code is that useForm
is being use like this:
useForm<FormInputs>({
resolver: yupResolver(formSchema),
})
Which you need to pass the type of form values as the generic input, which depends on your form values could be something like:
type FieldValues = {
firstName: string;
//... other values
};
An overall picture of what the solution might look like is here:
import { useForm, UseFormRegisterReturn } from "react-hook-form";
type FieldValues = {
firstName: string;
//... other values
};
export default function App() {
const {
register,
formState: { errors }
} = useForm<FieldValues>();
return (
<FormInput
label={"label"}
register={{ ...register("firstName") }}
errorMessage={errors["firstName"]?.message}
/>
);
}
type FormInputProps = {
label: string;
register: UseFormRegisterReturn;
errorMessage?: string;
type?: string;
};
const FormInput = ({ label, register, errorMessage, type }: FormInputProps) => {
return (
<FormLayout errorMessage={errorMessage}>
<TextField
label={label}
{...register}
fullWidth
size="small"
type={type ?? undefined}
error={errorMessage && errorMessage?.length > 0}
/>
</FormLayout>
);
};