How to get title property from select input in reactjs

Question

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>

So you want to have e.code instead of e.target.value?

Ryan Le
– Ryan Le

2021-09-15 08:18:32 +00:00
Commented Sep 15, 2021 at 8:18 — Ryan Le
– Ryan Le, Commented Sep 15, 2021 at 8:18
i want both @RyanLe

motionless570
– motionless570

2021-09-15 08:43:37 +00:00
Commented Sep 15, 2021 at 8:43 — motionless570
– motionless570, Commented Sep 15, 2021 at 8:43

Nokwiw · Accepted Answer · 2021-09-15 10:11:49Z

1

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

edited Sep 15, 2021 at 10:11

answered Sep 15, 2021 at 8:22

Nokwiw

3964 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

motionless570 Over a year ago

Thank you for your answer, but still, the country code is not being set. i believe you cant access it this way "e.target.title"

Nokwiw Over a year ago

here is an exemple : codesandbox.io/s/stupefied-darwin-dxh5w?file=/src/App.js

Nokwiw Over a year ago

You can access it with this way e.target.title

motionless570 Over a year ago

but its not being set and when i call it it shows nothing

Nokwiw Over a year ago

can you add your code to a online editor, please ? I think you have a problem somwhere else

|

Collectives™ on Stack Overflow

How to get title property from select input in reactjs

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related