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, Jul 07 '18 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, Jul 07 '18 at 22:43

score 20 · Answer 1 · answered Jul 07 '18 at 22:48

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 07 '18 at 22:48

Tholle

108,070
19
198
189

Thanks ! Can I have some explanations about how does it work ? I am a new at learning React and I am really curious. :) – CodeTech Jul 07 '18 at 22:57
3

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**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/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. – Tholle Jul 07 '18 at 23:01
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 ? – CodeTech Jul 07 '18 at 23:16
1

@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. – Tholle Jul 07 '18 at 23:22

score 1 · Answer 2 · edited Jul 18 '18 at 07:51

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

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

2 Answers2

Linked