I have a drop down list for all the countries in the world with their abbreviated code. Now i want to call a useState to set it and use it to insert it to my DB.
How can i do that?
here is my code:
example of the list:
export const countryList =[
{name: 'Afghanistan', code: 'AF'},
{name: 'Åland Islands', code: 'AX'},
{name: 'Albania', code: 'AL'},
{name: 'Algeria', code: 'DZ'},
{name: 'American Samoa', code: 'AS'},
const [collcountry,setCollCountry] = useState("");//this is being set
const [collcountrycode,setCollCountryCode] = useState("");// But how can i set the
//country code from the title property?
<Form.Select aria-label="Select Country" onChange={(e)=> { setCollCountry(e.target.value) }} >
<option></option>
{ countryList.map((e, key) => (
<option key={key} title={e.code} value={e.name}>{e.name}</option>))
}
</Form.Select>
bellow how you can get the country code :
const handleCollCountryChange = (e) => {
const country = countryList.find(
(country) => country.name === e.target.value
);
setCollCountry(country.name);
setCollCountryCode(country.code);
};
useEffect(() => {
console.log(collcountry);
console.log(collcountrycode);
}, [collcountry, collcountrycode]);
return (
<select
aria-label="Select Country"
onChange={(e) => handleCollCountryChange(e)}
>
{countryList.map((country, key) => (
<option
key={key}
title={country.code}
value={country.name}
onSelect={() => console.log("select")}
>
{country.name}
</option>
))}
</select>
);
for more visibility, you can change e by country :
{ countryList.map((country, key) => (
<option key={key} title={country.code} value={country.name}>{country.name}</option>))
}