Tengo una lista desplegable para todos los países del mundo con su código abreviado. Ahora quiero llamar a useState para configurarlo y usarlo para insertarlo en mi base de datos.
¿Cómo puedo hacer eso?
aquí está mi código:
ejemplo de la lista:
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>a continuación cómo puede obtener el código de país:
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> ); para mayor visibilidad, puede cambiar e por country :
{ countryList.map((country, key) => ( <option key={key} title={country.code} value={country.name}>{country.name}</option>)) }