CODEWITHSUNDEEP
javascriptreactjs
motionless570
motionless570

Reputation: 929

How to get title property from select input in reactjs

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>

Upvotes: 0

Views: 139

Answers (1)

Nokwiw
Nokwiw

Reputation: 396

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>))                                              
}

Upvotes: 1

Related Questions