how to get the key of a selected value from a dropdown in reactjs?

Question

how to bind a json data which has a key-value pair to select html in reactjs, such that It should display the value in the drop-down and If I choose a value , I should provide the relevant key?

For example:

var optionsdata = [
   {key='101',value='Lion'},
   {key='102',value='Giraffe'},
   {key='103',value='Zebra'},
   {key='104',value='Hippo'},
   {key='105',value='Penguin'}
  ];

in the drop-down, it should show "Lion","Giraffe","Zebra",... if I choose, Zebra, I should get the select value (Zebra) as well as the key (103, in the above example)

Because you have the optionsData, why don't you match it with the selected value to get the key? — kkkkkkk
– kkkkkkk, Commented Nov 24, 2016 at 3:19
@Khang , that will work, but how will we handle duplicate entries in this case? For example if we have student name and student-id (key), two student can have same name — MemoryLeak
– MemoryLeak, Commented Nov 24, 2016 at 3:53
the key is unique right? then you could the key to be value of option, like this: <option value={prop.key}>{prop.value}</option> — kkkkkkk
– kkkkkkk, Commented Nov 24, 2016 at 4:02

Shubham Khatri · Accepted Answer · 2016-11-24 03:53:24Z

3

You can simply filter out the data from the your object once you get get the value of selected option. I have not used controlled input in my example, If you use that it will be even better.

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      optionsdata : [
         {key:'101',value:'Lion'},
         {key:'102',value:'Giraffe'},
         {key:'103',value:'Zebra'},
         {key:'104',value:'Hippo'},
         {key:'105',value:'Penguin'}
       ]
    }
  }
  handleChange = (e) => {
    console.log(e.target.value);
    var value = this.state.optionsdata.filter(function(item) {
      return item.key == e.target.value
    })
    console.log(value[0].value);
  }
  render() {
    return (
      <select onChange={this.handleChange}>
        {this.state.optionsdata.map(function(data, key){  return (
          <option key={key} value={data.key}>{data.value}</option> )
        })}
      </select>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.min.js"></script>
<div id="app"></div>

edited Nov 24, 2016 at 3:53

answered Nov 24, 2016 at 3:39

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

2 Comments

MemoryLeak Over a year ago

How will we handle duplicate entries in this case? For example if we have student name and student-id (key), two student can have same name

Shubham Khatri Over a year ago

Yeah you were right, I changed the code to include the value attribute to be the key as this will be unique. we can then find the corresponding value from this key attribute

Nabnit Jha · Accepted Answer · 2020-04-20 10:38:25Z

3

Hope this answer will help

1) First find selected index which is called key

var selectedIndex = event.target.options.selectedIndex;

2) If you have custom attribute and want to fetch value of that attribute then

var customAtrribute= event.target.options[selectedIndex].getAttribute('customAtrribute');

answered Apr 20, 2020 at 10:38

Nabnit Jha

3474 silver badges14 bronze badges

Comments

luboskrnac · Accepted Answer · 2016-11-24 03:36:45Z

0

Use react-select. It is able to handle id and value elegantly. Map your id to react-select value and your value to react-select label.

You can configure callback which will return you selected value/s. You can even turn on search.

answered Nov 24, 2016 at 3:36

luboskrnac

24.7k10 gold badges86 silver badges93 bronze badges

Comments

Barraka · Accepted Answer · 2023-02-04 07:43:15Z

0

When you create a dropdown list from an object, you can map the object inside the "Select" tag in your JSX: (the 'my0bject' variable is actually a list of objects)

<select onChange={getValue}>
    {my0bject.map(x=><option key={x._id} data-id={x._id}>{x.name}</option>)}
</select>

The "key" attribute is only for react, you cannot access it later when you want to retrieve the id, so you need to create another custom attribute.

When you want to get the value:

function getValue(e) {
    const idChosen = e.target.children[e.target.selectedIndex].getAttribute('data-id');
}

answered Feb 4, 2023 at 7:43

Barraka

521 silver badge8 bronze badges

Collectives™ on Stack Overflow

how to get the key of a selected value from a dropdown in reactjs?

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related