How to retrieve the key into a Semantic-ui-react dropdown?

Question

I have small question about react dropdown menus.

I can extract the values inside the dropdown, but I also need the key, because my page is for selling stuff. So, it is an associative table and I need the id from each table to make my query INNERJOIN.

This is how I fill it:

let options_customers = [];

serviceList[0].map((service, i) =>
                    options_customers.push({ 
                        key: service.Id, 
                        text: service.Name, 
                        value: service.Name 
                     }))

My dropdown:

  <Dropdown 
    selection options={options_customers} 
    onChange={this.handleChange} 
    value={value} key={options_customers.key} 
    name="selectCustomer" placeholder='Select Customer' 
  />

Are you asking how you can get the key inside your handleChange function? — Tholle
– Tholle, Commented Jul 7, 2018 at 22:29
Yes, I would like to get the key inside my handleChange, but I always got undefined. Do you know if is it possible to have it ? — CodeTech
– CodeTech, Commented Jul 7, 2018 at 22:43

Tholle · Accepted Answer · 2018-07-07 22:48:04Z

20

You can use the value you get in the data to the onChange function to take out the right option and take the key from that:

handleChange(event, data) {
  const { value } = data;
  const { key } = data.options.find(o => o.value === value);
}

answered Jul 7, 2018 at 22:48

Tholle

113k22 gold badges209 silver badges198 bronze badges

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

4 Comments

CodeTech Over a year ago

Thanks ! Can I have some explanations about how does it work ? I am a new at learning React and I am really curious. :)

Tholle Over a year ago

Sure! The Dropdown onChange function will be called with an event and the data of the selected option. We can then search through the options given to the Dropdown with find for an option with the value the same as the value that just got selected. We finally take the key from this option, and we are done.

CodeTech Over a year ago

So could I apply for every components ? but why it is not stored in the event and we need to have the second parameters data ? because, my understanding the event provides us the attributes of the element so we can retrieving from that. Also, in your example, o.value ==== value is it compare directly the id because I have into my dropdown 2 sames values. For instance, id ="1" hello and id="2" hello. So does it compare the id ?

Tholle Over a year ago

@Nightlord That's the way the Semantic UI Dropdown is built. The texts can be the same, but it's probably not a good idea to have two options with the same value.

Karin · Accepted Answer · 2018-07-18 07:51:36Z

1

I am giving the feedback and the update that I have done :

First:

<Dropdown selection options={options_customers} onChange={this.handleChange} name="selectCustomer" placeholder='Select Customer' /><br />

In my previous code, I had value={value} and key={options_customers.key}

Secondly, in my handleChange, I implemented your example and now it is working Very thankful !

Upvoted his solution please to see on the top Working dropdown

edited Jul 18, 2018 at 7:51

Karin

3633 silver badges7 bronze badges

answered Jul 7, 2018 at 23:05

CodeTech

1661 silver badge8 bronze badges

Collectives™ on Stack Overflow

How to retrieve the key into a Semantic-ui-react dropdown?

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related