added useState and made input functional

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>