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;