How to get selected value of a dropdown menu in ReactJS

Question

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>

extra note: I want to use select and pass a value into a method. — BlueElixir, Mar 17 '15 at 20:25
Please refer to this link https://www.skptricks.com/2018/05/create-dropdown-using-reactjs.html — Abhisek Mishra, Jul 10 '18 at 12:55

Max Heiber · Accepted Answer · 2023-02-27T23:33:47.853

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 to state 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 the defaultValue 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.

Hey, 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. — BlueElixir, Mar 17 '15 at 22:45
@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 of `this.state.selectValue`. If you comment out the line you mentioned, this is the result: http://jsfiddle.net/f00erjqs/ The UI is out of sync. — Max Heiber, Mar 18 '15 at 01:09
Thank 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. — BlueElixir, Mar 18 '15 at 13:45
@desgarron6 Sure! Have fun. I recommend reading through the http://todomvc.com/examples/react/#/ source to see how to work through handling user input. — Max Heiber, Mar 18 '15 at 18:19
Update: React APIs have changed significantly since this answer — Max Heiber, Feb 27 '23 at 23:34

score 22 · Answer 2 · answered Aug 20 '21 at 05:10

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

score 19 · Answer 3 · edited Sep 07 '17 at 19:50

19

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;

edited Sep 07 '17 at 19:50

gandreadis

3,004
2
26
38

answered Mar 22 '16 at 06:56

Shubham Khatri

270,417
55
406
400

10

I'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: http://stackoverflow.com/a/29504636/2482570 and in the official docs: https://facebook.github.io/react/docs/refs-and-the-dom.html#dont-overuse-refs. Also, can you update your answer to use the new ref callback attribute API (https://facebook.github.io/react/docs/refs-and-the-dom.html#the-ref-callback-attribute)? – Max Heiber Jan 10 '17 at 16:49

score 14 · Answer 4 · answered Mar 17 '15 at 21:10

14

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

answered Mar 17 '15 at 21:10

Karén

215
1
7

14

A code example would have made this answer much more valuable, especially for beginners. – Maciej Gurban Feb 09 '17 at 18:39

ABHIJEET KHIRE · Answer 5 · 2019-08-01T11:10:22.810

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;

score 7 · Answer 6 · answered Nov 20 '20 at 09:54

Using React Functional Components:

const [option,setOption] = useState()

function handleChange(event){
    setOption(event.target.value)
}

<select name='option' onChange={handleChange}>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

score 4 · Answer 7 · edited Mar 16 '20 at 07:37

import React from 'react';
import Select from 'react-select';

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' },
];

class App extends React.Component {
  state = {
    selectedOption: null,
  };
  handleChange = selectedOption => {
    this.setState({ selectedOption });
    console.log(`Option selected:`, selectedOption);
  };
  render() {
    const { selectedOption } = this.state;

    return (
      <Select
        value={selectedOption}
        onChange={this.handleChange}
        options={options}
      />
    );
  }
}

And you can check it out on this site.

score 4 · Answer 8 · answered Apr 26 '20 at 05:07

It is as simple as that. You just need to use "value" attributes instead of "defaultValue" or you can keep both if a pre-selected feature is there.

 ....
const [currentValue, setCurrentValue] = useState(2);
<select id = "dropdown" value={currentValue} defaultValue={currentValue}>
     <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>
.....

setTimeut(()=> {
 setCurrentValue(4);
}, 4000);

In this case, after 4 secs the dropdown will be auto-selected with option 4.

where is onChange. Better post whole picture – Mustkeem K Oct 28 '21 at 04:09 — Mustkeem K, Oct 28 '21 at 04:09

score 4 · Answer 9 · answered Oct 05 '20 at 17:28

I was making a drop-down menu for a language selector - but I needed the dropdown menu to display the current language upon page load. I would either be getting my initial language from a URL param example.com?user_language=fr, or detecting it from the user’s browser settings. Then when the user interacted with the dropdown, the selected language would be updated and the language selector dropdown would display the currently selected language.

In the spirit of the other answers using food examples, I got all sorts of fruit goodness for you.

First up, answering the initially asked question with a basic React functional component - two examples with and without props, then how to import the component elsewhere.
Next up, the same example - but juiced up with Typescript.
Then a bonus finale - A language selector dropdown component using Typescript.

Basic React (16.13.1) Functional Component Example. Two examples of `FruitSelectDropdown` , one without props & one with accepting props `fruitDetector`

import React, { useState } from 'react'

export const FruitSelectDropdown = () => {
  const [currentFruit, setCurrentFruit] = useState('oranges')
  
  const changeFruit = (newFruit) => {
    setCurrentFruit(newFruit)
  }
  
  return (
    <form>
      <select 
        onChange={(event) => changeFruit(event.target.value)}
        value={currentFruit}
      >
        <option value="apples">Red Apples</option>
        <option value="oranges">Outrageous Oranges</option>
        <option value="tomatoes">Technically a Fruit Tomatoes</option>
        <option value="bananas">Bodacious Bananas</option>
      </select>
    </form>
  )
}

Or you can have FruitSelectDropdown accept props, maybe you have a function that outputs a string, you can pass it through using the fruitDetector prop

import React, { useState } from 'react'

export const FruitSelectDropdown = ({ fruitDetector }) => {
  const [currentFruit, setCurrentFruit] = useState(fruitDetector)
  
  const changeFruit = (newFruit) => {
    setCurrentFruit(newFruit)
  }
  
  return (
    <form>
      <select 
        onChange={(event) => changeFruit(event.target.value)}
        value={currentFruit}
      >
        <option value="apples">Red Apples</option>
        <option value="oranges">Outrageous Oranges</option>
        <option value="tomatoes">Technically a Fruit Tomatoes</option>
        <option value="bananas">Bodacious Bananas</option>
      </select>
    </form>
  )
}

Then import the FruitSelectDropdown elsewhere in your app

import React from 'react'
import { FruitSelectDropdown } from '../path/to/FruitSelectDropdown'

const App = () => {
  return (
    <div className="page-container">
      <h1 className="header">A webpage about fruit</h1>
      <div className="section-container">
        <h2>Pick your favorite fruit</h2>
        <FruitSelectDropdown fruitDetector='bananas' />

      </div>
    </div>
  )
}

export default App

`FruitSelectDropdown` with Typescript

import React, { FC, useState } from 'react'

type FruitProps = {
  fruitDetector: string;
}

export const FruitSelectDropdown: FC<FruitProps> = ({ fruitDetector }) => {
  const [currentFruit, setCurrentFruit] = useState(fruitDetector)
  
  const changeFruit = (newFruit: string): void => {
    setCurrentFruit(newFruit)
  }
  
  return (
    <form>
      <select 
        onChange={(event) => changeFruit(event.target.value)}
        value={currentFruit}
      >
        <option value="apples">Red Apples</option>
        <option value="oranges">Outrageous Oranges</option>
        <option value="tomatoes">Technically a Fruit Tomatoes</option>
        <option value="bananas">Bodacious Bananas</option>
      </select>
    </form>
  )
}

Then import the FruitSelectDropdown elsewhere in your app

import React, { FC } from 'react'
import { FruitSelectDropdown } from '../path/to/FruitSelectDropdown'

const App: FC = () => {
  return (
    <div className="page-container">
      <h1 className="header">A webpage about fruit</h1>
      <div className="section-container">
        <h2>Pick your favorite fruit</h2>
        <FruitSelectDropdown fruitDetector='bananas' />

      </div>
    </div>
  )
}

export default App

Bonus Round: Translation Dropdown with selected current value:

import React, { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'

export const LanguageSelectDropdown: FC = () => {
  const { i18n } = useTranslation()
  const i18nLanguage = i18n.language
  const [currentI18nLanguage, setCurrentI18nLanguage] = useState(i18nLanguage)
  
  const changeLanguage = (language: string): void => {
    i18n.changeLanguage(language)
    setCurrentI18nLanguage(language)
  }
  
  return (
    <form>
      <select 
        onChange={(event) => changeLanguage(event.target.value)}
        value={currentI18nLanguage}
      >
        <option value="en">English</option>
        <option value="de">Deutsch</option>
        <option value="es">Español</option>
        <option value="fr">Français</option>
      </select>
    </form>
  )
}

An invaluable resource for React/Typescript

score 2 · Answer 10 · answered Dec 31 '20 at 04:34

If you want to get value from a mapped select input then you can refer to this example:

class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          fruit: "banana",
        };
    
        this.handleChange = this.handleChange.bind(this);
      }
    
      handleChange(e) {
        console.log("Fruit Selected!!");
        this.setState({ fruit: e.target.value });
      }
    
      render() {
        return (
          <div id="App">
            <div className="select-container">
              <select value={this.state.fruit} onChange={this.handleChange}>
                {options.map((option) => (
                  <option value={option.value}>{option.label}</option>
                ))}
              </select>
            </div>
          </div>
        );
      }
    }
    
    export default App;

score 1 · Answer 11 · answered Apr 08 '20 at 16:57

1

You can handle it all within the same function as following

<select className="form-control mb-3" onChange={(e) => this.setState({productPrice: e.target.value})}>

  <option value="5">5 dollars</option>
  <option value="10">10 dollars</option>
                                         
</select>

as you can see when the user select one option it will set a state and get the value of the selected event without furder coding require!

answered Apr 08 '20 at 16:57

jerryurenaa

3,863
1
27
17

Here 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. – Bluerain Aug 25 '20 at 07:00
Hi, if you need to specify a default value you can use defaultValue="10" and this will select your option. I hope it helps. – jerryurenaa Aug 25 '20 at 16:19

score 1 · Answer 12 · answered Oct 21 '21 at 06:52

import {React, useState }from "react";

function DropDown() {

const [dropValue, setDropValue ]= useState();

return <>
    <div>
        <div class="dropdown">
          <button class="btn btn-secondary" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
            {dropValue==null || dropValue=='' ?'Select Id':dropValue}
          </button>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
            <li><a class="dropdown-item" onClick={()=> setDropValue('Action')} href="#">Action</a></li>
            <li><a class="dropdown-item" onClick={()=> setDropValue('Another action')} href="#">Another action</a></li>
            <li><a class="dropdown-item" onClick={()=> setDropValue('Something else here')} href="#">Something else here</a></li>
          </ul>
        </div>
    </div>
   </>
}

export default DropDown

score 0 · Answer 13 · edited Feb 23 '22 at 15:36

0

<select value ={this.state.value} onChange={this.handleDropdownChange}>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

edited Feb 23 '22 at 15:36

Suhaib Janjua

3,538
16
59
73

answered Feb 18 '22 at 14:03

Pradeep Kumar

21
1

Your 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](/help/how-to-answer). – Community Feb 18 '22 at 17:02

score 0 · Answer 14 · answered Jul 28 '22 at 10:20

As mentioned by Karen above you can just use the target value from the event triggered. Here is a small snippet of the code

                 `<select class="form-select py-2" 
                  onChange={(e) => setVotersPerPage(e.target.value)}>
                  <option value="10">10</option>
                  <option value="25">25</option>
                  <option value="50">50</option>
                  </select>`

How to get selected value of a dropdown menu in ReactJS

14 Answers14

Basic React (16.13.1) Functional Component Example. Two examples of `FruitSelectDropdown` , one without props & one with accepting props `fruitDetector`

`FruitSelectDropdown` with Typescript

Bonus Round: Translation Dropdown with selected current value:

Linked

Related

How to get selected value of a dropdown menu in ReactJS

14 Answers14

Basic React (16.13.1) Functional Component Example. Two examples of FruitSelectDropdown , one without props & one with accepting props fruitDetector

FruitSelectDropdown with Typescript

Bonus Round: Translation Dropdown with selected current value:

Linked

Related

Basic React (16.13.1) Functional Component Example. Two examples of `FruitSelectDropdown` , one without props & one with accepting props `fruitDetector`

`FruitSelectDropdown` with Typescript