#How can I pass data as prop in react form function

27 messages · Page 1 of 1 (latest)

muted stratus
#

I was wondering what am I missing as it is unable to perform routing

    const router = useRouter()
    const [email,setEmail]=useState('')
    const [name,setName] =useState('')
    const [password,setPassword] =useState('')
    const [confirmpassword,setConfirmPassword] =useState('')
   
  
    const handleSubmit = (data:any)=>{
      return(e:React.FormEvent)=>{
      
      
     
      if(email && password && confirmpassword &&confirmpassword==password){
      axios.post('/api/register',data)
      .then(()=>{
        toast.success("Successfully registered")
        router.push("/home")
      })
      .catch((error)=>{
        toast.error("Something went wrong")
      })
      
    }
    else{ 
      toast.error('Password does not match')
    }
  }
  }
lunar epoch
#

how are you using this function in the jsx?

muted stratus
muted stratus
lunar epoch
#

can you share the code of the jsx using this function? I am wondering if the inner function is being called at all

muted stratus
# 
 <form className=' grid grid-cols-1 gap-3 py-10' onSubmit={handleSubmit}>
        <Image src={src} className="px-4"  priority alt='logo'/>
          <Label>Email:</Label>
          <Input type="email" placeholder="Email" name="email" value={email}
           onChange={(e)=>setEmail(e.target.value)}
          />

          <Label>Username</Label>
          <Input type="name" placeholder="Name" name="name" value={name}
           onChange={(e)=>setName(e.target.value)}
          />
        
          
          <Label>Password:</Label>
          <Input type="password" name="password" placeholder='password' value={password} 
            onChange={(e)=>setPassword(e.target.value)}
          ></Input>
          <Label>Retype Password:</Label>
          <Input type="password" placeholder='Confirm password' name="confirmpassword" value={confirmpassword} 
            onChange={(e)=>setConfirmPassword(e.target.value)}
          ></Input>
          <Button type="submit" >Register</Button>
          <div className='flex flex-row text-center justify-center items-center gap-3'>
            <p className='text-bra'>Already having an Account</p>
            <Link className='cursor-pointer font-bold text-blue-900' href='/'>Login</Link>
          </div>
         
          
        </form>
lunar epoch
#

so you are passing handleSubmit as the function to be called when the form is submitted

#

but handleSubmit return another function which is not called anymore

#

so the function would essentially do nothing

muted stratus
lunar epoch
#

don't return a function from handleSubmit

# 
const handleSubmit = (e) => {
  if (email && password && ...)
#

this would be the correct start for the function

#

the submit event calls your function with the event as the first argument, not data

muted stratus
lunar epoch
#

what is data?

#

where does it come from

muted stratus
lunar epoch
#

I believe you would just build this object inside the handler function:

const data = { email, password } // etc
muted stratus
lunar epoch
#

failed how? error messages?

muted stratus
lunar epoch
#

500 means an internal error in the API so it could be anything, you will need to debug it

muted stratus
lunar epoch
#

first you need to figure out what is the error then work from there

#

unfortunately I don't have the time now to debug a 500 error