rare-sapphire
rare-sapphire2y ago

Using useRegister example, throws a type error.

I'm using the example provided that's listed under pages/customRegisterPage: https://refine.dev/docs/api-reference/core/hooks/authentication/useRegister/ I've removed any extra code that I added (just page styling) and used just the absolute basic example but I'm getting the following type error. Any idea what might be causing that?
Type '(values: RegisterVariables) => void' is not assignable to type 'FormEventHandler<HTMLFormElement>'.
Types of parameters 'values' and 'event' are incompatible.
Type 'FormEvent<HTMLFormElement>' is missing the following properties from type 'RegisterVariables': email, passwordts(2322)
index.d.ts(1412, 9): The expected type comes from property 'onSubmit' which is declared here on type 'DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>'
Type '(values: RegisterVariables) => void' is not assignable to type 'FormEventHandler<HTMLFormElement>'.
Types of parameters 'values' and 'event' are incompatible.
Type 'FormEvent<HTMLFormElement>' is missing the following properties from type 'RegisterVariables': email, passwordts(2322)
index.d.ts(1412, 9): The expected type comes from property 'onSubmit' which is declared here on type 'DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>'
useRegister | refine
useRegister data hook from refine is a modified version of react-query's useMutation for registration.
5 Replies
kapa.ai
kapa.ai2y ago
Hi @h3rrpie. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It seems like you're getting a type error because the onSubmit event handler expects a FormEvent instead of the RegisterVariables type. You can fix this by using the event.preventDefault() method and extracting the form values from the event target. Here's the updated onSubmit function:
const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
const email = event.currentTarget.elements.namedItem("email") as HTMLInputElement;
const password = event.currentTarget.elements.namedItem("password") as HTMLInputElement;

register({ email: email.value, password: password.value });
};
const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
const email = event.currentTarget.elements.namedItem("email") as HTMLInputElement;
const password = event.currentTarget.elements.namedItem("password") as HTMLInputElement;

register({ email: email.value, password: password.value });
};
And here's the updated RegisterPage component:
import { useRegister } from "@refinedev/core";

type RegisterVariables = {
email: string;
password: string;
};

export const RegisterPage = () => {
const { mutate: register } = useRegister<RegisterVariables>();

const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
const email = event.currentTarget.elements.namedItem("email") as HTMLInputElement;
const password = event.currentTarget.elements.namedItem("password") as HTMLInputElement;

register({ email: email.value, password: password.value });
};

return (
<form onSubmit={onSubmit}>
<label>Email</label>
<input name="email" value="test@refine.com" />
<label>Password</label>
<input name="password" value="refine" />
<button type="submit">Submit</button>
</form>
);
};
import { useRegister } from "@refinedev/core";

type RegisterVariables = {
email: string;
password: string;
};

export const RegisterPage = () => {
const { mutate: register } = useRegister<RegisterVariables>();

const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
const email = event.currentTarget.elements.namedItem("email") as HTMLInputElement;
const password = event.currentTarget.elements.namedItem("password") as HTMLInputElement;

register({ email: email.value, password: password.value });
};

return (
<form onSubmit={onSubmit}>
<label>Email</label>
<input name="email" value="test@refine.com" />
<label>Password</label>
<input name="password" value="refine" />
<button type="submit">Submit</button>
</form>
);
};
This should resolve the type error you're encountering. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai2y ago
<@204362818592440323> kapa.ai is still learning and improving, please let us how it did by reacting below
rare-sapphire
rare-sapphireOP2y ago
Ok great, is there any specific reason why the example might be different from the docs?
wise-white
wise-white2y ago
it's a mistake 🤞🏻 we will fix our example code
rare-sapphire
rare-sapphireOP2y ago
Sorry for the late response, and thanks for the update! Glad I wasn't missing something in particular myself. 🙂