33138

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 <strong>INNERJOIN</strong>.

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' />

Answer1:

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

Answer2:

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 <img alt="Working dropdown" class="b-lazy" data-src="https://i.stack.imgur.com/aRmKc.png" data-original="https://i.stack.imgur.com/aRmKc.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

Recommend

  • Rails…Am I modeling this correctly?
  • Nested AJAX Calls using .done
  • if you have a DLL creating a bitmap in memory, how to return it to the browser?
  • Load php page results into div with ajax with link?
  • How to display converted time zones in a 'generic week' (Sunday thru Saturday)?
  • Javascript inside HTML import not affecting imported HTML
  • opencv deskewing a contour
  • Controller or RestController
  • Compiling multiple source files in Rcpp
  • 'Edit' function for forum posts and such
  • How to redirect into different page by user type in php and mysql
  • Set WebClient.Builder.exchangeStrategies() without losing Spring Jackson configuration
  • SQL Server 2012 not showing unicode character in results
  • how to specify different css for ie
  • select an input by value?
  • How do I use libcurl to printf a remote FTP directory listing?
  • Regex not working in java 1.5
  • How can i move Clearcase dyamic/snapshot views to another host (Linux)
  • When to use the tag in the head and body section of a html page? [duplicate]
  • Google Spreadsheet Script to Blink a range of Cells
  • Calculate time from document
  • 'url' requires a non-empty first argument. The syntax changed in Django 1.5, see the docs
  • How can I ssh into a server that requires 2 password authentication using python's paramiko mod
  • Amazon Elastick BeanStalk error: Failed to create the AWS Elastic Beanstalk application version
  • How to clear a browser cache in Protractor
  • How to turn off notice reporting in xampp?
  • How to change user identity when git pushing via ssh?
  • php “page caching” solution suggestions for CMS Applications
  • Functions by reference or by variable, which to use when?
  • Update cell query for Excel ADO from Delphi
  • How to get rgb from transparent pixel in js
  • Sql - ON DUPLICATE KEY UPDATE
  • How to use FirstOrDefault inside Include
  • PHP Permalinks.. how to change?
  • Running R's aov() mixed effects model from Python using rpy2
  • Creating random wired topology for given arbitrary number of nodes on NS2
  • ReferenceError: TextEncoder is not defined