6

I am doing a form sign-up using typescript and react, however, I am facing a typing error when I try to submit handleSignup function. Here is my code:

import { useForm } from "react-hook-form"; import * as yup from "yup"; import { yupResolver } from "@hookform/resolvers/yup"; import { api } from "../../services/api"; export const Signup = () => { const schema = yup.object().shape({ name: yup.string(), email: yup.string(), password: yup.string(), address: yup.object().shape({ zipCode: yup.string(), number: yup.number(), complement: yup.string(), }) }) interface signUpCredentials { name: string email: string password: string address: { zipCode: string number: number complement: string } } const { register, formState: { errors }, handleSubmit, } = useForm({ resolver: yupResolver(schema) }) const handleSignup = ({ address, email, name, password }: signUpCredentials ) => { api .post("/users/signup", { address, email, name, password }) .then((response) => { console.log("Created") }) .catch((err) => { console.error("Not created") }) } return ( <form onSubmit={handleSubmit(handleSignup)} > <input {...register("name")} placeholder="name" /> <input {...register("email")} placeholder="email" /> <input {...register("password")} placeholder="password" /> <input {...register("address.zipCode")} placeholder="zipCode" /> <input {...register("address.number")} placeholder="number" /> <input {...register("address.complement")} placeholder="complement" /> <button type="submit" > Submit </button> </form> ) }

The problem that I am facing is exactly *

onSubmit={handleSubmit(handleSignup)}

I am receiving:

Argument of type '({ address, email, name, password }: signUpCredentials) => void' is not assignable to parameter of type 'SubmitHandler'. Types of parameters '__0' and 'data' are incompatible. Type '{ [x: string]: any; }' is missing the following properties from type 'signUpCredentials': name, email, password, addressts(2345)

Improve this question

2 Answers 2

Reset to default
7

You have not specified the type variable signUpCredentials to the useForm hook, and you should change the onSubmit handler to handleSignup and call the handleSubmit inside that. So, your code should look like this,

import { useForm } from "react-hook-form"; import * as yup from "yup"; import { yupResolver } from "@hookform/resolvers/yup"; import { api } from "../../services/api"; export const Signup = () => { const schema = yup.object().shape({ name: yup.string(), email: yup.string(), password: yup.string(), address: yup.object().shape({ zipCode: yup.string(), number: yup.number(), complement: yup.string(), }) }) interface signUpCredentials { name: string email: string password: string address: { zipCode: string number: number complement: string } } const { register, formState: { errors }, handleSubmit, } = useForm<signUpCredentials>({ resolver: yupResolver(schema) }) const handleSignup = handleSubmit(data: signUpCredentials) => { console.log(data) // do api stuff here } return ( <form onSubmit={handleSignup} > <input {...register("name")} placeholder="name" /> <input {...register("email")} placeholder="email" /> <input {...register("password")} placeholder="password" /> <input {...register("address.zipCode")} placeholder="zipCode" /> <input {...register("address.number")} placeholder="number" /> <input {...register("address.complement")} placeholder="complement" /> <button type="submit" > Submit </button> </form> ) }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

For a better understanding, I created a Code Sandbox link where I have removed the import statement to services as we don't have that, and you can see the function is called without any warnings/errors by checking the console.

Edit loving-brahmagupta-09dizp

Ref: React Hook form (TS)

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

No need to change the onSubmit as mentioned by @sri-vineeth. Just use SubmitHandler type.

const handleSignup: SubmitHandler<SignUpCredentials> = ({ address, email, name, password }) => { ... }

Also please note that interfaces and types should use PascalCase. Therefore change signUpCredentials to SignUpCredentials.

Improve this answer

Comments