added useState and made input functional

1 files changed, 56 insertions, 10 deletions

diff --git a/client/src/pages/Enrollment/Address/Address.jsx b/client/src/pages/Enrollment/Address/Address.jsx
index 6a32bcf..132fba1 100644
--- a/client/src/pages/Enrollment/Address/Address.jsx
+++ b/client/src/pages/Enrollment/Address/Address.jsx
@@ -1,4 +1,5 @@
-import React from 'react'
+import React, { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 import Header from '../../../components/Header/Header'
 import Input from '../../../components/Input/Input'
 import SubmitButton from '../../../components/SubmitButton/SubmitButton'
@@ -6,6 +7,10 @@ import SubmitButton from '../../../components/SubmitButton/SubmitButton'
 import styles from './Address.module.css'
 
 const Address = () => {
+  const [address, setAddress] = useState('')
+
+  const navigate = useNavigate()
+
   return (
     <>
       <Header subheading="Enrollment" />
@@ -14,32 +19,73 @@ const Address = () => {
           <Input
             id="houseNo"
             label="House Number/ Apartment"
-            value="house"
+            value={address}
             type="text"
+            onChange={(e) => setAddress(e.target.value)}
+            placeholder="Enter your House Number / Apartment"
           />
           <Input
             id="locality"
             label="Area / Locality"
-            value="locality"
+            value={address}
             type="text"
+            onChange={(e) => setAddress(e.target.value)}
+            placeholder="Enter your Area / Locality"
           />
           <Input id="town" label="Village / Town" value="town" type="text" />
           <Input
             id="postOffice"
             label="Post Office"
-            value="postOffice"
+            value={address}
             type="text"
+            onChange={(e) => setAddress(e.target.value)}
+            placeholder="Enter your Village / Town"
           />
         </div>
         <div className={styles.address__container}>
-          <Input id="street" label="Street / Road" value="street" type="text" />
-          <Input id="landmark" label="Landmark" value="landmark" type="text" />
-          <Input id="district" label="District" value="district" type="text" />
-          <Input id="pincode" label="Pincode" value="pincode" type="text" />
+          <Input
+            id="street"
+            label="Street / Road"
+            value={address}
+            type="text"
+            onChange={(e) => setAddress(e.target.value)}
+            placeholder="Enter the Street / Road"
+          />
+          <Input
+            id="landmark"
+            label="Landmark"
+            value={address}
+            type="text"
+            onChange={(e) => setAddress(e.target.value)}
+            placeholder="Enter the Landmark"
+          />
+          <Input
+            id="district"
+            label="District"
+            value={address}
+            type="text"
+            onChange={(e) => setAddress(e.target.value)}
+            placeholder="Enter your District"
+          />
+          <Input
+            id="pincode"
+            label="Pincode"
+            value={address}
+            type="text"
+            onChange={(e) => setAddress(e.target.value)}
+            placeholder="Enter your area Pincode"
+          />
         </div>
       </div>
-      <Input id="state" label="State" value="state" type="text" />
-      <SubmitButton />
+      <Input
+        id="state"
+        label="State"
+        value={address}
+        type="text"
+        onChange={(e) => setAddress(e.target.value)}
+        placeholder="Enter your State"
+      />
+      <SubmitButton onClick={() => navigate('/enrollment/photo')} />
     </>
   )
 }