डिप्लोमा इन ऑफिस मैनेजमेंट एण्ड अकाउटिंग

डिप्लोमा इन ऑफिस मैनेजमेंट एण्ड अकाउटिंग

Full Stack Web Development with Laravel

Full Stack Web Development with Laravel

Affiliate Program

Affiliate Program

Add new user using NEXT JS mongodb

import Link from "next/link";
import Layout from "./layout";
import {
    FormControl,
    FormLabel,
    FormErrorMessage,
    FormHelperText,
    Input,
    Container
  } from '@chakra-ui/react'

  import { Button} from '@chakra-ui/react'
import { useState } from "react";
import { useMutation} from "react-query";
import { addUser } from "../../controllers/users";
const Register=()=>{



    const [form, setForm]=useState({
        name:"",
        email:"",
        password:"",
        cpassword:""
    });


    const mutation=useMutation(addUser,{
        onSuccess:()=>{   
            console.log("on success create")         
            setForm({
                ...form,
                name:"",
                email:"",
                password:"",
                cpassword:""
            });            
        }
    });

    

    const submitForm=async()=>{
        await mutation.mutate({
            name: form.name,
            email: form.email,
            password: form.password
        });
    }

    return(
        <>
        <Layout>
            <Container>
                <FormControl>
                    <FormLabel>Name</FormLabel>
                    <Input type='text' defaultValue={form.name} onChange={e=>setForm({...form, name:e.target.value})} />                    
                </FormControl>
                <FormControl>
                    <FormLabel>Email address</FormLabel>
                    <Input type='email' defaultValue={form.email} onChange={e=>setForm({...form, email:e.target.value})} />
                    <FormHelperText>We'll never share your email.</FormHelperText>
                </FormControl>

                <FormControl>
                    <FormLabel>Password</FormLabel>
                    <Input type='password' defaultValue={form.password} onChange={e=>setForm({...form, password:e.target.value})} />                    
                </FormControl>

                <FormControl>
                    <FormLabel>Confirm password</FormLabel>
                    <Input type='password' defaultValue={form.cpassword} onChange={e=>setForm({...form, cpassword:e.target.value})} />                    
                </FormControl>

                <Button 
                onClick={submitForm}
                colorScheme='blue' my={3}>Create account</Button>
            </Container>
        </Layout>
        </>
    )
}
export default Register;
© 2016 - 2023, All Rights are Reserved.