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