R
Refine

ask-any-question

Using useRegister example, throws a type error.

Ccorrect-apricot5/22/2023
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.
Kkapa.ai5/22/2023
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: ----------------------
Kkapa.ai5/22/2023
<@204362818592440323> kapa.ai is still learning and improving, please let us how it did by reacting below
Ccorrect-apricot5/22/2023
Ok great, is there any specific reason why the example might be different from the docs?
Ggenetic-orange5/23/2023
it's a mistake 🤞🏻 we will fix our example code
Ccorrect-apricot5/26/2023
Sorry for the late response, and thanks for the update! Glad I wasn't missing something in particular myself. 🙂

Looking for more? Join the community!

R
Refine

ask-any-question

Join Server
Recommended Posts
Deploying to DO app platform with FetchHello, So I have a fetch script on one of my edit pages that when the page loads it sends the ID ofIs that possible to implement more than one auth provider?Is that possible to implement more than one auth provider? At the moment i have only google authentiMigrating from existing projectGreetings! I was wondering how easy it is to go from a vanilla react project to use Refine. We haveuseLoginI'm looking for a headless example of using useLogin. Ideally I want to have a custom login page setHow to use form instance ANTD inside filterDropdown?https://codesandbox.io/s/compassionate-bash-pzxuf7?file=/src/App.jsx Please help me build a correctChange resource primary keyIs there a way to change a resource's primary key property? For example I have a resource which its Selected value is lost in Mantine Select if a search is done after selecting a valueWhen using the selectProps from the useSelect hook, and creating a Mantine Select component with thoRecruitement managementis there a way i can create an application of recruitement management like this im stuck findingnextjs project wont show after i install NPM packageI created a Nextjs, Materiual-UI, Supabase/Supabase project,,, I installed Styled-Compomnents And Inferencer fails to generate `Show` and `Edit` components with headless refineI wonder if it is just me or someone else is seeing it too. The refine.new generated project displayuseTable. Passing Id to data provider?Hello, My requirements need that my application renders a table("parent" table), and each table rHow can I run `-r @cypress/instrument-cra` with refine start?Hello, I'm trying to use `@cypress/instrument-cra` in my refine project and the library said I haAdding Refine to RemixI have remix project which is already working can I Refine to it. Do we have any douments How to gettable not rendering updated dataI was using useUpdateMany() hook for bulk updation and it went well. but the table is not fetching t