Untitled

import React from 'react'
import './form.css'



function Form() {
    let [values, setValues] = React.useState({
        name: '',
        email: '',
        password: '',
        confirmPassword: '',
    });
    const [submitted, setSubmit] = React.useState(false);

    function handleName(event) {
        setValues({
            ...values,
            name: event.target.value
        });
        console.log(event)
    }
    function handleEmail(event) {
        setValues({
            ...values,
            email: event.target.value
        });
    }
    function handlePassword(event) {
        setValues({
            ...values,
            password: event.target.value
        });
    }
    function handleConfirm(event) {
        setValues({
            ...values,
            confirmPassword: event.target.value
        });
    }
    function handleSubmit(event) {
        event.preventDefault();
        setSubmit(true);
    }
    return (
        <div>
            <div className='container'>
                {/* {submitted ? <h1>Welcome {values.name}</h1> : */}
                {/* <> */}
                <h1>Registration Form</h1>
                <form onSubmit={handleSubmit}>
                    <div className='NameDiv'>
                        <label htmlFor='name'>Name:</label><br />
                        <input type='text' id='name' value={values.name} placeholder='Name' onChange={handleName} /><br />
                        {!values.name ? <p>*Please enter the name {() => setSubmit(false)}</p> : null}
                    </div>
                    <label htmlFor='email'>Email:</label><br />
                    <input type='email' id='email' value={values.email} placeholder='Email' onChange={handleEmail} /><br />
                    <label htmlFor='password' >Password:</label><br />
                    <input type='password' id='password' value={values.password} placeholder='Password' onChange={handlePassword} /><br />
                    <label htmlFor='name'>Confirm Password:</label><br />
                    <input type='password' id='confirmpassword' value={values.confirmPassword} placeholder='confirm password' onChange={handleConfirm} /><br />
                    {/* {values.password !== values.confirmPassword && submitted ? <p>Password and confirm password do not match {() => setSubmit(false)} </p> : null} */}
                    <button>Submit</button>
                </form>
                {/* </> */}
            </div>
        </div>
    )
}

export default Form