How to Get Selected Value from a Mapped Select Input in React
Introduction
Building select input elements is straightforward when working on web projects. But with the emergence of JavaScript frameworks and libraries, building input elements can be a little tricky as you need to think from a data point of view and plan ahead for all the input elements that will be in the app.
In React, all input elements need to be controlled by the state, including the select element. In this guide, you will learn how to get the selected value from a select input in React.
Mapped Select Input
Start by creating an array of objects to use in creating the options for the select input. For this example, create a select input to select a value from a list of fruits.
1const options = [
2 {
3 label: "Apple",
4 value: "apple",
5 },
6 {
7 label: "Mango",
8 value: "mango",
9 },
10 {
11 label: "Banana",
12 value: "banana",
13 },
14 {
15 label: "Pineapple",
16 value: "pineapple",
17 },
18];You might be wondering why there need to be objects inside the array when you could use a string to create the options. It's because the value of the option doesn't necessarily have to be the same as the label.
Next, using the options array, create a select input inside the App component with the different options. Assign the value property from the object to the value prop of the options element, so that the options are mapped correctly and the value for the select element can be retrieved.
1import React from "react";
2
3const options = [
4 {
5 label: "Apple",
6 value: "apple",
7 },
8 {
9 label: "Mango",
10 value: "mango",
11 },
12 {
13 label: "Banana",
14 value: "banana",
15 },
16 {
17 label: "Pineapple",
18 value: "pineapple",
19 },
20];
21
22class App extends React.Component {
23 render() {
24 return (
25 <div id="App">
26 <div className="select-container">
27 <select>
28 {options.map((option) => (
29 <option value={option.value}>{option.label}</option>
30 ))}
31 </select>
32 </div>
33 </div>
34 );
35 }
36}
37
38export default App;Setting the Default Value Using State
To select a default option in React, the selected attribute is used in the option element. In React, though, instead of using the selected attribute, the value prop is used on the root select element. So, you can set a default value by passing the value of the option in the value prop of the select input element. This is very convenient in a controlled component as you only have to update the value in one place.
1class App extends React.Component {
2 render() {
3 return (
4 <div id="App">
5 <div className="select-container">
6 <select value="banana">
7 {options.map((option) => (
8 <option value={option.value}>{option.label}</option>
9 ))}
10 </select>
11 </div>
12 </div>
13 );
14 }
15}Getting the Selected Value
To fetch the selected value from the select element, you can use the onChange event handler prop. Just like the input or textarea elements, you can use the onChange event handler to get the value from the event object.
Now, make this select input element controlled by using the state to pass the value. Set the initial value in the state of the component, and in the handleChange method, set the selected value as the new value in the state.
1class App extends React.Component {
2 constructor(props) {
3 super(props);
4 this.state = {
5 fruit: "banana",
6 };
7
8 this.handleChange = this.handleChange.bind(this);
9 }
10
11 handleChange(e) {
12 console.log("Fruit Selected!!");
13 this.setState({ fruit: e.target.value });
14 }
15
16 render() {
17 return (
18 <div id="App">
19 <div className="select-container">
20 <select value={this.state.fruit} onChange={this.handleChange}>
21 {options.map((option) => (
22 <option value={option.value}>{option.label}</option>
23 ))}
24 </select>
25 </div>
26 </div>
27 );
28 }
29}
30
31export default App;Conclusion
In this guide, you learned some everyday use cases for the select input element, such as how to get started, how to fetch the selected value, and how to make the select element controlled. There are third-party libraries like react-select that you can use to minimize all the boilerplate code.
That's it from this guide. Keep learning!