React useState Issue

Hasnain Ali — Mon, 13 Jun 2022 19:12:00 +0000
Hey i'm working on a project where i will have to reset my fields after submitting form. When i try to reset the state to initial it revert back to previous state after some time. here is the code. `import React,{useState,useEffect} from 'react';
import { Navbar } from '../../components';
import { Footer } from '../Home';
import axios from 'axios';
export default function Signup() {
const initialState = {
    name:'',
    email:'',
    password:'',
    password_confirmation:'',
    scope:'patient',
    terms:false,
    error_list:[],
    error:'',
    success:'',
}
const [signupForm,setSignupForm]=useState(initialState);
useEffect(() => {
        console.log(signupForm);
},[signupForm]);

const handleForm=(e)=>{
    if(e.target.type=="checkbox"){
       if(e.target.checked){
        setSignupForm({...signupForm,terms:true});

       }else{
        setSignupForm({...signupForm,terms:false});
       }
    }else{
        setSignupForm({...signupForm,[e.target.name]:e.target.value});   
    }
}




function onSubmitFuction(event) {
    event.preventDefault();      
    const data={
        name:signupForm.name,
        email:signupForm.email,
        password:signupForm.password,
        password_confirmation:signupForm.password_confirmation,
        scope:signupForm.scope,
        terms:signupForm.terms,
    }



    axios.post(`/auth/signup`,data)
        .then(res=>{ 
            setSignupForm({...signupForm,success:res.data.data.message});

            setTimeout(function() {
                setSignupForm({...signupForm,success:false});
              }, 5000);
              setSignupForm({...initialState});
              event.target.reset();
              setSignupForm({...initialState});


        }).catch(function (error) {
            console.log(error);
            if(error.response.status===422){
                setSignupForm({...signupForm,error_list:error.response.data.errors});
            }else{
                setSignupForm({...signupForm,error:error.response.data.error});
                setTimeout(function() {
                    setSignupForm({...signupForm,error:false});
                }, 5000);

            }
        });

        console.log( signupForm());
}



return (
    <div>
        <Navbar />

        <div className='flex w-full h-screen justify-center items-center '>
            <div className='flex flex-col md:flex-row md:space-x-6 space-y-6 contact md:space-y-0  w-full max-w-4xl p-8 rounded-xl shadow-lg text-white'>

                <div className='animate__animated animate__slideInRight  bg-white shadow-lg rounded-xl p-8 text-gray-600'>
                    <form  onSubmit={onSubmitFuction}  className='flex h-full flex-col space-y-8'>


                    {signupForm.error?
                            <div className="animate__animated animate__flipInX flex items-center justify-center px-4">
                                <div role="alert" id="alert" className="transition duration-150 ease-in-out w-full lg:w-11/12 mx-auto bg-white dark:bg-gray-800 shadow rounded flex flex-col py-4 md:py-0 items-center md:flex-row justify-between">
                                    <div className="flex flex-col items-center md:flex-row">
                                        <div className="mr-3 p-4 bg-red-400 rounded md:rounded-tr-none md:rounded-br-none text-white">
                                            <i className='fa fa-times'></i>
                                        </div>
                                        <p className="mr-2 text-base font-bold text-gray-800 dark:text-gray-100 mt-2 md:my-0">Error</p>
                                        <div className="h-1 w-1 bg-gray-300 dark:bg-gray-700 rounded-full mr-2 hidden xl:block"></div>
                                        <p className="text-sm lg:text-base dark:text-gray-400 text-gray-600 lg:pt-1 xl:pt-0 sm:mb-0 mb-2 text-center sm:text-left">{signupForm.error}</p>
                                    </div>
                                </div>
                            </div> : ""}
                    {signupForm.success?
                            <div className="animate__animated animate__flipInX flex items-center justify-center px-4">
                                <div role="alert" id="alert" className="transition duration-150 ease-in-out w-full lg:w-11/12 mx-auto bg-white dark:bg-gray-800 shadow rounded flex flex-col py-4 md:py-0 items-center md:flex-row justify-between">
                                    <div className="flex flex-col items-center md:flex-row">
                                        <div className="mr-3 p-4 bg-green-400 rounded md:rounded-tr-none md:rounded-br-none text-white">
                                            <i className='fa fa-check'></i>
                                        </div>
                                        <p className="mr-2 text-base font-bold text-gray-800 dark:text-gray-100 mt-2 md:my-0"></p>
                                        <div className="h-1 w-1 bg-gray-300 dark:bg-gray-700 rounded-full mr-2 hidden xl:block"></div>
                                        <p className="text-sm lg:text-base dark:text-gray-400 text-gray-600 lg:pt-1 xl:pt-0 sm:mb-0 mb-2 text-center sm:text-left">{signupForm.success}</p>
                                    </div>
                                </div>
                            </div> : ""}
                        <div className='my-auto'>
                            <div className='mb-6'>
                                <label className="py-6" htmlFor="">
                                    Name
                                </label>

                                <input type='text' name='name'  defaultValue={signupForm.name} onChange={handleForm} placeholder='Full Name' className='p-2 ring-1 ring-gray-300 w-full rounded-md px-4 py-2 outline-none focus:ring-2 focus:ring-purple'/>
                                {signupForm.error_list.name?<span className='text-rose-500'>{signupForm.error_list.name}</span>:''}
                            </div>
                            <div className='mb-6'>
                                <label className="py-6" htmlFor="">
                                    Email Adress
                                </label>

                                <input type='email' name='email'  defaultValue={signupForm.email} onChange={handleForm} placeholder='Email Adress ' className='p-2 ring-1 ring-gray-300 w-full rounded-md px-4 py-2 outline-none focus:ring-2 focus:ring-purple'>
                                </input>
                                {signupForm.error_list.email?<span className='text-rose-500'>{signupForm.error_list.email}</span>:''}
                            </div>
                            <div className='mb-6'>
                                <label className="  " htmlFor="">
                                    Password
                                </label>

                                <input type='password' name='password'  defaultValue={signupForm.password} onChange={handleForm} placeholder='Password' className=' ring-1 ring-gray-300 w-full rounded-md px-4 py-2 outline-none focus:ring-2 focus:ring-purple'>
                                </input>
                                {signupForm.error_list.password?<span className='text-rose-500'>{signupForm.error_list.password}</span>:''}
                            </div>
                            <div className='mb-6'>
                                <label className="  " htmlFor="">
                                   Confirm Password
                                </label>

                                <input type='password' name='password_confirmation'  defaultValue={signupForm.password_confirmation} onChange={handleForm} placeholder='Confirm Password' className=' ring-1 ring-gray-300 w-full rounded-md px-4 py-2 outline-none focus:ring-2 focus:ring-purple'>
                                </input>
                                {signupForm.error_list.password_confirmation?<span className='text-rose-500'>{signupForm.error_list.password_confirmation}</span>:''}
                            </div>
                            <div className='mb-6'>
                                <label className="  " htmlFor="">
                                    Registration type :
                                </label>

                                <div className="flex">
                                    <div className="flex items-center mr-4">
                                        <input id="inline-radio" type="radio" onClick={handleForm} value="patient" defaultChecked={signupForm.scope==="patient"?"checked":''}  name="scope" className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"/>
                                        <label htmlFor="inline-radio" className="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">Patient</label>
                                    </div>
                                    <div className="flex items-center mr-4">
                                        <input id="inline-2-radio" type="radio" onClick={handleForm} defaultChecked={signupForm.scope==="doctor"?"checked":''} value="doctor" name="scope" className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"/>
                                        <label htmlFor="inline-2-radio" className="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">Doctor</label>
                                    </div>
                                </div>
                            </div>
                            <div className='mb-6'>
                                <input type="checkbox" name='terms' onChange={handleForm} defaultChecked={signupForm.terms?'checked':''} />
                                <label className="pl-4" htmlFor="">
                                    I agree to <u>Terms & service</u> use.
                                </label>
                                {signupForm.error_list.terms?<span className='text-rose-500'>{signupForm.error_list.terms}</span>:''}
                            </div>
                            <button className='block w-full btn-contact text-white font-bold rounded-lg  px-6 py-2 uppercase text-sm mt-6'> Register Now </button>
                        </div>
                    </form>
                </div>

                {/* //contact */}
                <div className='animate__animated animate__slideInLeft flex flex-col space-y-8 justify-between'>
                    <div>
                        <h1 className='font-bold text-4xl tracking-wide'>Register Now</h1>
                        <p className='pt-2 text-sm'>Here our team will help you yo can call us or submit your query!</p>

                    </div>
                    <div>
                        <div>
                            <div className='inline-flex space-x-2 items-center' >
                                <svg xmlns="http://www.w3.org/2000/svg"
                                    className="h-5 w-5 absolute  "
                                    viewBox="0 0 20 20"
                                    fill="currentColor">
                                    <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
                                    <path d="M16.707 3.293a1 1 0 010 1.414L15.414 6l1.293 1.293a1 1 0 01-1.414 1.414L14 7.414l-1.293 1.293a1 1 0 11-1.414-1.414L12.586 6l-1.293-1.293a1 1 0 011.414-1.414L14 4.586l1.293-1.293a1 1 0 011.414 0z" />
                                </svg>
                                <span className='p-6 pl-10'>+(92)3035957991</span>

                            </div>
                        </div>
                        <div>
                            <div className='inline-flex space-x-2 items-center' >
                                <svg xmlns="http://www.w3.org/2000/svg"
                                    className="h-5 w-5"
                                    viewBox="0 0 20 20"
                                    fill="currentColor">
                                    <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
                                    <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
                                </svg>
                                <span className='p-6'>ahtisham@gmail.com</span>

                            </div>
                        </div>
                        <div>
                            <div className='inline-flex space-x-2 items-center' >
                                <svg xmlns="http://www.w3.org/2000/svg"
                                    className="h-5 w-5" viewBox="0 0 20 20"
                                    fill="currentColor">
                                    <path fillRule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clipRule="evenodd" />
                                </svg>
                                <span className='p-6'>Rawalpindi,Tench Bhata</span>

                            </div>
                        </div>
                    </div>
                    <div>
                        <span className="inline-flex">
                            <a href='/#' className="text-gray-500">
                                <svg
                                    fill="currentColor"
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    strokeWidth="2"
                                    className="w-5 h-5"
                                    viewBox="0 0 24 24"
                                >
                                    <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
                                </svg>
                            </a>
                            <a href='/#' className="ml-4 text-gray-500">
                                <svg
                                    fill="currentColor"
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    strokeWidth="2"
                                    className="w-5 h-5"
                                    viewBox="0 0 24 24"
                                >
                                    <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
                                </svg>
                            </a>
                            <a href='/#' className="ml-4 text-gray-500">
                                <svg
                                    fill="none"
                                    stroke="currentColor"
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    strokeWidth="2"
                                    className="w-5 h-5"
                                    viewBox="0 0 24 24"
                                >
                                    <rect
                                        width="20"
                                        height="20"
                                        x="2"
                                        y="2"
                                        rx="5"
                                        ry="5"
                                    ></rect>
                                    <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
                                </svg>
                            </a>
                            <a href='/#' className="ml-4 text-gray-500">
                                <svg
                                    fill="currentColor"
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    strokeWidth="2"
                                    className="w-5 h-5"
                                    viewBox="0 0 24 24"
                                >
                                    <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>
                                </svg>
                            </a>
                        </span>
                    </div>
                </div>
                {/* form */}


            </div>
        </div>

        <Footer />

    </div>
)
}
`
DEV Community: Hasnain Ali

React useState Issue
