states and country

src/pages/add-user-form.jsx

@@ -31,8 +31,41 @@ export default function addUserForm() {
   const [phoneValue, setphoneValue] = useState()
   let [individualValue = true, setindividualValue] = useState()
 
-// console.log(phoneValue)
+  const [allStates, setAllStates] = useState([])
+  const [allCities, setAllCities] = useState([])
+
+  const handleSelectAllStates = stateCode => {
+    setAllCities([])
+    fetch(`https://api.siliconpin.com/v3/list/country/city/?country=${countryValue.value}&state=${stateCode.value}`).then(res => res.json())
+      .then(data => {
+        console.log("handleSelectAllStates:", data, options)
+        let newData = data && data.length > 0 && data.map(n => {
+          return {
+            label: n.name,
+            value: n.name
+
+          }
+        })
+        setAllCities(newData)
+      })
+  }
+
   const selectCountry = countryValue => {
+    setAllStates([])
+    fetch(`https://api.siliconpin.com/v3/list/country/state/?country=${countryValue.value}`).then(res => res.json())
+      .then(data => {
+        console.log("countryValue:", data, options)
+        let newData = data && data.length > 0 && data.map(n => {
+          return {
+            label: n.name,
+            value: n.iso2
+
+          }
+        })
+        setAllStates(newData)
+        setAllCities([])
+      })
+
     setCountryValue(countryValue)
   }
 
@@ -153,6 +186,22 @@ export default function addUserForm() {
                   name="country" instanceId={useId()} options={options} value={countryValue}
                   onChange={selectCountry}/>
               </div>
+              {allStates && allStates.length > 0 && <div className='flex flex-col w-full'>
+                <label htmlFor="state" className='text-xl font-bold'>State</label>
+                <Select
+                  className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
+                  name="state" options={allStates} value={allStates[0].name}
+                  onChange={handleSelectAllStates}/>
+              </div>}
+              {
+                allCities && allCities.length > 0 && <div className='flex flex-col w-full'>
+                  <label htmlFor="Cities" className='text-xl font-bold'>Cities</label>
+                  <Select
+                    className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
+                    name="Cities" options={allCities} value={allCities[0].name}
+                    // onChange={() => {}}
+                  />
+                </div>}
               <div className='flex flex-col w-full'>
                 <label htmlFor="phone" className='text-xl font-bold'> Phone</label>
                 <PhoneInput