Untitled
unknown
javascript
3 years ago
2.6 kB
6
Indexable
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
Editor is loading...