Untitled
unknown
plain_text
a year ago
1.5 kB
1
Indexable
Never
import axios from 'axios'; import { ErrorMessage } from 'formik'; import { useEffect, useState } from 'react'; import Select from 'react-select'; const BlockCountrySelect = ({ name, defaultValue, setFieldValue }) => { const [countries, setCountries] = useState([]); const [selectedOptions, setSelectedOptions] = useState(defaultValue || []); const fetchedCountries = async () => { try { const response = await axios.get('https://trial.mobiscroll.com/content/countries.json'); const data = response.data; const countries = data.map((country) => ({ value: country.value, label: country.text, })); setCountries(countries); } catch (error) { console.error(error); } }; useEffect(() => { fetchedCountries(); }, []); useEffect(() => { setSelectedOptions(defaultValue || []); }, [defaultValue]); const handleSelectChange = (selectedOptions) => { setSelectedOptions(selectedOptions); setFieldValue(name, selectedOptions); }; return ( <div className="mb-10 flex flex-col"> <Select name={name} onChange={handleSelectChange} isMulti value={selectedOptions} options={countries} /> <ErrorMessage name={name} component="div" className="text-red-600" /> </div> ); }; export default BlockCountrySelect;