diff options
Diffstat (limited to 'client/src/pages/Enrollment/Address/Address.jsx')
| -rw-r--r-- | client/src/pages/Enrollment/Address/Address.jsx | 128 |
1 files changed, 78 insertions, 50 deletions
diff --git a/client/src/pages/Enrollment/Address/Address.jsx b/client/src/pages/Enrollment/Address/Address.jsx index 4acd0e6..d4ffe81 100644 --- a/client/src/pages/Enrollment/Address/Address.jsx +++ b/client/src/pages/Enrollment/Address/Address.jsx @@ -1,35 +1,12 @@ -import React, { useState } from 'react' -import { useNavigate } from 'react-router-dom' +import React from 'react' import Header from '../../../components/Header/Header' import Input from '../../../components/Input/Input' -import SubmitButton from '../../../components/SubmitButton/SubmitButton' import { Country, State, City } from 'country-state-city' import Select from 'react-select' import styles from './Address.module.css' -const Address = () => { - const [address, setAddress] = useState('') - const [houseNo, setHouseNo] = useState('') - const [locality, setLocality] = useState('') - const [postOffice, setPostOffice] = useState('') - const [street, setStreet] = useState('') - const [landmark, setLandmark] = useState('') - const [town, setTown] = useState('') - const [pincode, setPincode] = useState('') - const [state, setState] = useState('') - const [country, setCountry] = useState('') - const [city, setCity] = useState('') - - const navigate = useNavigate() - - const handleSubmit = () => { - navigate('/enrollment/photo') - const add = `${houseNo} ${locality} ${postOffice} ${street} ${landmark} ${town} ${city} ${state} ${countries} ${pincode}` - setAddress({ add }) - console.log(address) - } - +const Address = ({ formData, setFormData }) => { const countries = Country.getAllCountries() const updatedCountries = countries.map((country) => ({ @@ -67,10 +44,12 @@ const Address = () => { }) } + console.log(formData.country, formData.state, formData.district, formData.village) + return ( <> <Header subheading="Enrollment" /> - <form onSubmit={() => handleSubmit()} className={styles.address}> + <div className={styles.address}> <div className={styles.address__container}> <div className={styles.input}> <div className={styles.input__container}> @@ -80,8 +59,13 @@ const Address = () => { name="country" label="country" options={updatedCountries} - value={country} - onChange={setCountry} + value={formData.country} + onChange={e => { + setFormData({ + ...formData, + country: e + }) + }} styles={customStyles} /> </div> @@ -92,9 +76,14 @@ const Address = () => { <Select id="state" name="state" - options={updatedStates(country.isoCode)} - value={state} - onChange={setState} + options={updatedStates(formData.country.isoCode)} + value={formData.state} + onChange={e => { + setFormData({ + ...formData, + state: e + }) + }} styles={customStyles} /> </div> @@ -105,9 +94,14 @@ const Address = () => { <Select id="city" name="city" - options={updatedCities(country.isoCode, state.isoCode)} - value={city} - onChange={setCity} + options={updatedCities(formData.country.isoCode, formData.state.isoCode)} + value={formData.district} + onChange={e => { + setFormData({ + ...formData, + district: e + }) + }} styles={customStyles} /> </div> @@ -115,9 +109,14 @@ const Address = () => { <Input id="town" label="Village / Town" - value={town} + value={formData.village} type="text" - onChange={(e) => setTown(e.target.value)} + onChange={(e) => { + setFormData({ + ...formData, + village: e.target.value + }) + }} placeholder="Enter your Village / Town" /> </div> @@ -125,33 +124,53 @@ const Address = () => { <Input id="houseNo" label="House Number/ Apartment" - value={houseNo} + value={formData.houseNo} type="text" - onChange={(e) => setHouseNo(e.target.value)} + onChange={(e) => { + setFormData({ + ...formData, + houseNo: e.target.value + }) + }} placeholder="Enter your House Number / Apartment" /> <Input id="street" label="Street / Road" - value={street} + value={formData.street} type="text" - onChange={(e) => setStreet(e.target.value)} + onChange={(e) => { + setFormData({ + ...formData, + street: e.target.value + }) + }} placeholder="Enter the Street / Road" /> <Input id="locality" label="Area / Locality" - value={locality} + value={formData.locality} type="text" - onChange={(e) => setLocality(e.target.value)} + onChange={(e) => { + setFormData({ + ...formData, + locality: e.target.value + }) + }} placeholder="Enter your Area / Locality" /> <Input id="postOffice" label="Post Office" - value={postOffice} + value={formData.postOffice} type="text" - onChange={(e) => setPostOffice(e.target.value)} + onChange={(e) => { + setFormData({ + ...formData, + postOffice: e.target.value + }) + }} placeholder="Enter your Village / Town" /> </div> @@ -159,23 +178,32 @@ const Address = () => { <Input id="landmark" label="Landmark" - value={landmark} + value={formData.landmark} type="text" - onChange={(e) => setLandmark(e.target.value)} + onChange={(e) => { + setFormData({ + ...formData, + landmark: e.target.value + }) + }} placeholder="Enter the Landmark" /> <Input id="pincode" label="Pincode" - value={pincode} + value={formData.pincode} type="text" - onChange={(e) => setPincode(e.target.value)} + onChange={(e) => { + setFormData({ + ...formData, + pincode: e.target.value + }) + }} placeholder="Enter your area Pincode" pattern="[0-9]+" /> </div> - <SubmitButton /> - </form> + </div> </> ) } |