<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.14.7/babel.min.js"></script>
<script type="text/babel">
const { useState } = React;
const [selectedOption, setSelectedOption] = useState('');
{ key: '1', value: 'option1', label: 'Option 1' },
{ key: '2', value: 'option2', label: 'Option 2' },
{ key: '3', value: 'option3', label: 'Option 3' },
// Add more options as needed
const handleDropdownChange = (event) => {
const selectedValue = event.target.value;
setSelectedOption(selectedValue);
// Find the corresponding object from the options array
const selectedOptionObject = options.find((option) => option.value === selectedValue);
if (selectedOptionObject) {
const selectedOptionKey = selectedOptionObject.key;
console.log('Selected option key:', selectedOptionKey);
<div className='container'>
<h2>React Js get key of selected value from Dropdown</h2>
<h3>Selected Option: {selectedOption}</h3>
<select onChange={handleDropdownChange}>
<option value="">Select an option</option>
{options.map((option) => (
<option key={option.key} value={option.value}>
ReactDOM.render(<App />, document.getElementById('app'));
/* Styles for the container and button */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
/* Styling for the select element */
/* Styling for the option elements */
background-color: #007bff;
transition: background-color 0.3s ease;
/* Hover effect for the button */
background-color: #0056b3;