Passing data as props in form function

Hi fam how can I pass props on a form function below is my form function

const handlesubmit =(e:React.FormEvent ) =>{
e.preventDefault()
axios.post('/api/register', data)
.then(()=>{
router.push('/')
}
.catch((error) =>{
toast.error('invalid')
}
}

const handlesubmit =(e:React.FormEvent ) =>{
e.preventDefault()
axios.post('/api/register', data)
.then(()=>{
router.push('/')
}
.catch((error) =>{
toast.error('invalid')
}
}

How can I pass data as prop

8 Replies

.hatulapro•2y ago

You can create the handler function with another function:

const handler = (data: whatever) => {
  return (e: React.FormEvent) => {
    // stuff
  }
}

const handler = (data: whatever) => {
  return (e: React.FormEvent) => {
    // stuff
  }
}

Or define it inline (if possible):

<button onClick={(e: React.FormEvent) => console.log(someData)}></button>

<button onClick={(e: React.FormEvent) => console.log(someData)}></button>

RevaycolizerOP•2y ago

I got it right but server throwing 500 internal server error Below is the function code to perform user sign up

    const handleSubmit = (e:React.FormEvent)=>{ 
       
         e.preventDefault() 
        
       
       if(email && hashedPassword && confirmpassword &&confirmpassword==hashedPassword){ 
      
       
       const data ={email,name,hashedPassword} 
       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') 
     } 
    
   }

    const handleSubmit = (e:React.FormEvent)=>{ 
       
         e.preventDefault() 
        
       
       if(email && hashedPassword && confirmpassword &&confirmpassword==hashedPassword){ 
      
       
       const data ={email,name,hashedPassword} 
       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') 
     } 
    
   }

I tried creating an account using axios at first it worked but after creating a single account it stopped working what might be the problem in the new app dir

import bcrypt from 'bcrypt'
import prisma from '@/app/libs/prismadb'
import { NextResponse } from 'next/server';

export async function POST(
    request: Request
){
    const body = await request.json()
    const {
        email,
        name,
        password
    } = body;

    const hashedPassword = await bcrypt.hash(password, 12);

    const user = await prisma.user.create({
        data:{
            email,
            name,
            hashedPassword
        }
    });

    return NextResponse.json(user)
}

import bcrypt from 'bcrypt'
import prisma from '@/app/libs/prismadb'
import { NextResponse } from 'next/server';

export async function POST(
    request: Request
){
    const body = await request.json()
    const {
        email,
        name,
        password
    } = body;

    const hashedPassword = await bcrypt.hash(password, 12);

    const user = await prisma.user.create({
        data:{
            email,
            name,
            hashedPassword
        }
    });

    return NextResponse.json(user)
}

RevaycolizerOP•2y ago

kinsyu•2y ago

Seems like an issue with your db connection

kinsyu•2y ago

You might want to look into toast.promise() for something like this. https://react-hot-toast.com/docs/toast

toast() API - react-hot-toast

RevaycolizerOP•2y ago

How do I solve this?

kinsyu•2y ago

Make sure you're using the correct env variables and that the setup is correct, are you using planetscale?

RevaycolizerOP•2y ago

I'm using prisma and mongodb atlas

Gaming

Programming

Passing data as props in form function