How to get selected value from a mapped select input in React

In React applications, working with forms and handling user input is a common task. When dealing with <select> inputs, you might often encounter scenarios where the options are dynamically generated from a data source, such as an array or an API response. In such cases, getting the selected value from a mapped select input can be a bit tricky. However, it is essential for processing user selections effectively. This Answer will teach you how to extract the selected value from a mapped select input in a React application.

Syntax

To create a select input in React, you use the <select> element. Here's the basic syntax:

<select value={selectedValue} onChange={handleChange}>
  <option value="first-value">First</option>
  <option value="second-value">Second</option>
  <option value="third-value">Third</option>
</select>

Code example

Let's create a more detailed React component that uses <select> tag and dynamically renders options based on a provided array:

Code explanation

  • Lines 1–2: This initial line imports React and the useState hook for managing the state in functional components. The following line imports a CSS file named App.css, which likely includes styles for this component.

  • Line 5: This line declares a state variable selectedOption and a function setSelectedOption to update its value. It initializes selectedOption with an empty string using the useState hook.

  • Lines 7–14: These lines declare an array options containing objects representing different programming languages. Each object has two properties: value and label.

  • Lines 16–18: These lines declare a function handleSelectChange, which is called when the value of the select input changes. It updates the selectedOption state with the new value.

  • Lines 20–37: The return statement starts the JSX markup. It returns the UI elements to be rendered by this component.

    • The div serves as a container for the entire component. It has a CSS class name select-container , which likely provides styling.

    • The <h2> element provides a label for the select input.

    • The select element is a drop-down list. It has a CSS class name select-box , and the state variable controls its value. The onChange event triggers the handleSelectChange function.

    • The map function maps through the options array and generates an option element for each item.

    • This p element contains the label “Description:” and is styled to have bold font weight.

  • Line 39: This line exports the App component as the default export from this file, allowing it to be imported and used in other files.

Conclusion

In React, obtaining the selected value from a mapped select input involves managing state and event handling effectively. By following the syntax and code examples provided in this Answer, you can easily implement this functionality in your React applications. Whether you’re working with dynamic data sources or building interactive forms, understanding how to extract the selected value from a mapped select input is a valuable skill for building robust and user-friendly interfaces.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved