diff options
Diffstat (limited to 'client/src/pages/Enrollment/FormOne')
-rw-r--r-- | client/src/pages/Enrollment/FormOne/FormOne.jsx | 35 |
1 files changed, 29 insertions, 6 deletions
diff --git a/client/src/pages/Enrollment/FormOne/FormOne.jsx b/client/src/pages/Enrollment/FormOne/FormOne.jsx index 4ba274c..ed83a6f 100644 --- a/client/src/pages/Enrollment/FormOne/FormOne.jsx +++ b/client/src/pages/Enrollment/FormOne/FormOne.jsx @@ -1,9 +1,18 @@ -import React from 'react' +import React, { useState } from 'react' import Input from '../../../components/Input/Input' import LabelCard from '../../../components/LabelCard/LabelCard' import styles from './FormOne.module.css' const FormOne = () => { + const [indianResident, setIndianResident] = useState(true) + const [fullName, setFullName] = useState('') + const [gender, setGender] = useState('') + const [dateOfBirth, setDateOfBirth] = useState( + new Date().toISOString().slice(0, 10) + ) + + console.log(fullName, indianResident, gender, dateOfBirth) + return ( <div className={styles.formone}> <div className={styles.formone__radio}> @@ -12,7 +21,8 @@ const FormOne = () => { type="radio" id="indian" name="resident" - value="Indian Resident" + value={indianResident} + onChange={() => setIndianResident(true)} required /> <label htmlFor="indian">Indian Resident</label> @@ -23,33 +33,45 @@ const FormOne = () => { id="indian" name="resident" value="Indian Resident" + onChange={() => setIndianResident(false)} required /> <label htmlFor="indian">Non-Residential Indian</label> </span> </div> - <Input type="text" id="fullName" label="Full Name" value="Full Name" /> + <Input + type="text" + id="fullName" + label="Full Name" + value={fullName} + onChange={(e) => setFullName(e.target.value)} + placeholder="Enter your full name" + /> <div className={styles.formone__gender}> <LabelCard id="male" name="gender" title="Male" + value={gender} + onChange={() => setGender('male')} image={`${process.env.PUBLIC_URL}/assets/images/male.svg`} /> <LabelCard id="female" name="gender" - value="female" + value={gender} title="Female" + onChange={() => setGender('female')} image={`${process.env.PUBLIC_URL}/assets/images/female.svg`} /> <LabelCard id="trans" name="gender" - value="trans" + value={gender} title="Transgender" + onChange={() => setGender('transgender')} image={`${process.env.PUBLIC_URL}/assets/images/trans.svg`} /> </div> @@ -61,7 +83,8 @@ const FormOne = () => { type="date" id="dob" name="dob" - value="Date of Birth" + value={dateOfBirth} + onChange={(e) => setDateOfBirth(e.target.value)} required /> </div> |