How to get "key" prop from React element (on change)?

Question

I want to get option's value and key when select onChange.

I know I can get option's value simplicity used event.target.value in onChangeOption function, but how can I get key?

<select onChange={this.onChangeOption} value={country}>     {countryOptions.map((item, key) =>         <option key={key} value={item.value}>             {item.name}         </option>     )} </select> 

Answer 1

You will need to pass value in key as a different prop.

From docs:

Keys serve as a hint to React but they don’t get passed to your components. If you need the same value in your component, pass it explicitly as a prop with a different name:

Read: https://reactjs.org/docs/lists-and-keys.html

Answer 2

Passing key as a prop works obviously, but much quicker way could be to include the key as a custom attribute in your html.

class App extends React.Component {    constructor(props) {      super(props);      this.onSelect = this.onSelect.bind(this);    }    onSelect(event) {      const selectedIndex = event.target.options.selectedIndex;          console.log(event.target.options[selectedIndex].getAttribute('data-key'));    }      render() {      return (         <div>        <select onChange = {this.onSelect}>         <option key="1" data-key="1">One</option>          <option key="2" data-key="2">Two</option>             </select>        </div>      );    }  }    ReactDOM.render( < App / > , document.getElementById('root'));

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