Cannot find name 'handleSubmit' in Reactjs-CodePudding

I am working on Reactjs and nextjs,Right now i am trying to "validate form" but i am getting following error Cannot find name 'handleSubmit' Right now i am using following code but not working for me

import Head from 'next/head'
import Image from 'next/image'
import { Inter } from '@next/font/google'
import styles from '@/styles/Home.module.css'
const inter = Inter({ subsets: ['latin'] })
import { useForm } from "react-hook-form";
const checkauth=()=>
{
 alert('Hello world');
}
export default function Home() {
 return (
   <>
   <div className="container">
 <div className="screen">
   <div className="screen__content">
     <form className="login" onSubmit={handleSubmit(checkauth)}>
       <div className="login__field">
         <i className="login__icon fas fa-user" />
         <input
           type="text"
           className="login__input"
           placeholder="User name / Email"
         />
       </div>
       <div className="login__field">
         <i className="login__icon fas fa-lock" />
         <input
           type="password"
           className="login__input"
           placeholder="Password"
         />
       </div>
       <button className="button login__submit">
         <span className="button__text">Log In Now</span>
         <i className="button__icon fas fa-chevron-right" />
       </button>
     </form>
       </div>
    </div>
</div>

   </>
 )
}

CodePudding user response：

It looks like you are trying to use handleSubmit function but it is not defined. Destructure it from useForm inside Home component.

Here is an example code:

import { useForm } from "react-hook-form";

export default function Home() {
 const { handleSubmit } = useForm();

const checkauth = (data) => {
 alert("Hello world");
};


 return (
   <div className="container">
     <div className="screen">
       <div className="screen__content">
         <form className="login" onSubmit={handleSubmit(checkauth)}>
           <div className="login__field">
             <i className="login__icon fas fa-user" />
             <input
               type="text"
               className="login__input"
               placeholder="User name / Email"
             />
           </div>
           <div className="login__field">
             <i className="login__icon fas fa-lock" />
             <input
               type="password"
               className="login__input"
               placeholder="Password"
             />
           </div>
           <button className="button login__submit">
             <span className="button__text">Log In Now</span>
             <i className="button__icon fas fa-chevron-right" />
           </button>
         </form>
       </div>
     </div>
   </div>
 );
}

read react-hook-form documentation

CodePudding user response：

You have to get handleSubmit function from useForm

const { handleSubmit } = useForm()

Now to call it do something like this below

onSubmit={() => handleSubmit(checkauth)}