React Js get key of selected value from Dropdown

    const { useState } = React;

​

    const App = () => {

     const [selectedOption, setSelectedOption] = useState('');

​

      const options = [

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

        }

      };

​

      return (

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

                {option.label}

              </option>

            ))}

          </select>

        </div>

      );

    }

​

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

  </script>