How to get selected value of a dropdown menu in ReactJS
Solution 1
The code in the render
method represents the component at any given time.
If you do something like this, the user won't be able to make selections using the form control:
<select value="Radish">
<option value="Orange">Orange</option>
<option value="Radish">Radish</option>
<option value="Cherry">Cherry</option>
</select>
So there are two solutions for working with forms controls:
-
Controlled Components Use component
state
to reflect the user's selections. This provides the most control, since any changes you make tostate
will be reflected in the component's rendering:
example:
var FruitSelector = React.createClass({
getInitialState:function(){
return {selectValue:'Radish'};
},
handleChange:function(e){
this.setState({selectValue:e.target.value});
},
render: function() {
var message='You selected '+this.state.selectValue;
return (
<div>
<select
value={this.state.selectValue}
onChange={this.handleChange}
>
<option value="Orange">Orange</option>
<option value="Radish">Radish</option>
<option value="Cherry">Cherry</option>
</select>
<p>{message}</p>
</div>
);
}
});
React.render(<FruitSelector name="World" />, document.body);
JSFiddle: http://jsfiddle.net/xe5ypghv/
-
Uncontrolled Components The other option is to not control the value and simply respond to
onChange
events. In this case you can use thedefaultValue
prop to set an initial value.<div> <select defaultValue={this.state.selectValue} onChange={this.handleChange} > <option value="Orange">Orange</option> <option value="Radish">Radish</option> <option value="Cherry">Cherry</option> </select> <p>{message}</p> </div>
http://jsfiddle.net/kb3gN/10396/
The docs for this are great: http://facebook.github.io/react/docs/forms.html and also show how to work with multiple selections.
UPDATE
A variant of Option 1 (using a controlled component) is to use Redux and React-Redux to create a container component. This involves connect
and a mapStateToProps
function, which is easier than it sounds but probably overkill if you're just starting out.
Solution 2
Implement your Dropdown as
<select id = "dropdown" ref = {(input)=> this.menu = input}>
<option value="N/A">N/A</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
Now, to obtain the selected option value of the dropdown menu just use:
let res = this.menu.value;
Solution 3
Just use onChange event of the <select>
object.
Selected value is in e.target.value
then.
By the way, it's a bad practice to use id="..."
. It's better to use ref=">.."
http://facebook.github.io/react/docs/more-about-refs.html
Solution 4
It should be like:
import React, { useState } from "react";
export default function App() {
const getInitialState = () => {
const value = "Orange";
return value;
};
const [value, setValue] = useState(getInitialState);
const handleChange = (e) => {
setValue(e.target.value);
};
return (
<div>
<select value={value} onChange={handleChange}>
<option value="Orange">Orange</option>
<option value="Radish">Radish</option>
<option value="Cherry">Cherry</option>
</select>
<p>{`You selected ${value}`}</p>
</div>
);
}
you can see it here: https://codesandbox.io/s/quizzical-https-t1ovo?file=/src/App.js:0-572
Solution 5
As for front-end developer many time we are dealing with the forms in which we have to handle the dropdowns and we have to use the value of selected dropdown to perform some action or the send the value on the Server, it's very simple you have to write the simple dropdown in HTML just put the one onChange method for the selection in the dropdown whenever user change the value of dropdown set that value to state so you can easily access it in AvFeaturedPlayList 1 remember you will always get the result as option value and not the dropdown text which is displayed on the screen
import React, { Component } from "react";
import { Server } from "net";
class InlineStyle extends Component {
constructor(props) {
super(props);
this.state = {
selectValue: ""
};
this.handleDropdownChange = this.handleDropdownChange.bind(this);
}
handleDropdownChange(e) {
this.setState({ selectValue: e.target.value });
}
render() {
return (
<div>
<div>
<div>
<select id="dropdown" onChange={this.handleDropdownChange}>
<option value="N/A">N/A</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div>Selected value is : {this.state.selectValue}</div>
</div>
</div>
);
}
}
export default InlineStyle;
Related videos on Youtube
BlueElixir
Updated on July 16, 2022Comments
-
BlueElixir almost 2 years
I'm using react and I want to get the value of the selected option of a dropdown in react but I don't know how. Any suggestions? thanks! My dropdown is just a select like:
<select id = "dropdown"> <option value="N/A">N/A</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select>
-
dandavis about 9 years
alert(dropdown.value)
-
BlueElixir about 9 yearsextra note: I want to use select and pass a value into a method.
-
dandavis about 9 years
<select onchange=method(value)>
, or use the more complex off-side bind, or from in JS,method(drowdown.value)
-
Abhisek Mishra almost 6 yearsPlease refer to this link skptricks.com/2018/05/create-dropdown-using-reactjs.html
-
-
BlueElixir about 9 yearsHey, your answer was exactly what I was looking for! However, I don't understand the purpose of value={this.state.selectValue} . I look at the docs and it states that :the value of the rendered element will always reflect the value prop. However, your example seems to work even if I delete the line: value={this.state.selectValue}. what exactly does this line do? How is this any different than the example in the docs where they use value="Hello!"? It seems to me that the only thing that matters is the handleChange (which deals with setState) method and the message variable.
-
Max Heiber about 9 years@desgarron6 Good question! In the Controlled Components example,
value={this.state.selectValue}
effectively sets the default value of the input. This wasn't clear before, because "Orange" would have been the default anyway since it's the first option. I updated the code to set "Radish" as the initial value ofthis.state.selectValue
. If you comment out the line you mentioned, this is the result: jsfiddle.net/f00erjqs The UI is out of sync. -
BlueElixir about 9 yearsThank you! This is perfect. I believe it was the nature of the dropdown where orange would have been the original value which confused me. Thanks for clarification.
-
Max Heiber about 9 years@desgarron6 Sure! Have fun. I recommend reading through the todomvc.com/examples/react/# source to see how to work through handling user input.
-
Max Heiber over 7 yearsI'd recommend avoiding refs. The whole point of the virtual DOM is to abstract away the real DOM, but refs tie you to the real DOM. More discussion here: stackoverflow.com/a/29504636/2482570 and in the official docs: facebook.github.io/react/docs/…. Also, can you update your answer to use the new ref callback attribute API (facebook.github.io/react/docs/…)?
-
Maciej Gurban about 7 yearsA code example would have made this answer much more valuable, especially for beginners.
-
Bluerain over 3 yearsHere is the question of default selected value and not after selection value. For example, in your code, if 10 dollars is default selected value from the API and you need to render the app with this default selection without any user interaction.
-
jerryurenaa over 3 yearsHi, if you need to specify a default value you can use defaultValue="10" and this will select your option. I hope it helps.
-
Mustkeem K over 2 yearswhere is onChange. Better post whole picture
-
Admin about 2 yearsYour answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.