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
useStatehook for managing the state in functional components. The following line imports a CSS file namedApp.css, which likely includes styles for this component.Line 5: This line declares a state variable
selectedOptionand a functionsetSelectedOptionto update its value. It initializesselectedOptionwith an empty string using theuseStatehook.Lines 7–14: These lines declare an array
optionscontaining objects representing different programming languages. Each object has two properties:valueandlabel.Lines 16–18: These lines declare a function
handleSelectChange, which is called when the value of the select input changes. It updates theselectedOptionstate with the new value.Lines 20–37: The
returnstatement starts the JSX markup. It returns the UI elements to be rendered by this component.The
divserves as a container for the entire component. It has a CSS class nameselect-container, which likely provides styling.The
<h2>element provides a label for theselectinput.The
selectelement is a drop-down list. It has a CSS class nameselect-box, and the state variable controls its value. TheonChangeevent triggers thehandleSelectChangefunction.The
mapfunction maps through theoptionsarray and generates anoptionelement for each item.This
pelement contains the label “Description:” and is styled to have bold font weight.
Line 39: This line exports the
Appcomponent 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
