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    lt select id    dropdown  gt       lt option value  N A  gt N A lt  option gt       lt option value  1  gt 1 lt  option gt       lt option value  2  gt 2 lt  option gt       lt option value  3  gt 3 lt  option gt       lt option value  4  gt 4 lt  option gt   lt  select gt

User · Answer

You can handle it all within the same function as following

_x000D_

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

_x000D_

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!

User · Answer

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    lt select value  Radish  gt     lt option value  Orange  gt Orange lt  option gt     lt option value  Radish  gt Radish lt  option gt     lt option value  Cherry  gt Cherry lt  option gt   lt  select gt    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          lt div gt         lt select          value  this state selectValue           onChange  this handleChange          gt          lt option value  Orange  gt Orange lt  option gt           lt option value  Radish  gt Radish lt  option gt           lt option value  Cherry  gt Cherry lt  option gt         lt  select gt         lt p gt  message  lt  p gt         lt  div gt                          React render  lt FruitSelector name  World    gt   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    lt div gt    lt select defaultValue  this state selectValue    onChange  this handleChange     gt       lt option value  Orange  gt Orange lt  option gt       lt option value  Radish  gt Radish lt  option gt       lt option value  Cherry  gt Cherry lt  option gt     lt  select gt     lt p gt  message  lt  p gt     lt  div gt            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

User · Answer

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          lt div gt           lt div gt             lt div gt               lt select id  dropdown  onChange  this handleDropdownChange  gt                 lt option value  N A  gt N A lt  option gt                 lt option value  1  gt 1 lt  option gt                 lt option value  2  gt 2 lt  option gt                 lt option value  3  gt 3 lt  option gt                 lt option value  4  gt 4 lt  option gt               lt  select gt             lt  div gt              lt div gt Selected value is    this state selectValue  lt  div gt           lt  div gt         lt  div gt               export default InlineStyle

User · Answer

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    lt select id    dropdown  value  currentValue  defaultValue  currentValue  gt        lt option value  N A  gt N A lt  option gt        lt option value  1  gt 1 lt  option gt        lt option value  2  gt 2 lt  option gt        lt option value  3  gt 3 lt  option gt        lt option value  4  gt 4 lt  option gt     lt  select gt         setTimeut     gt     setCurrentValue 4      4000     In this case  after 4 secs the dropdown will be auto-selected with option 4

User · Answer

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  amp  one with accepting props fruitDetector import React    useState   from  react   export const FruitSelectDropdown        gt      const  currentFruit  setCurrentFruit    useState  oranges        const changeFruit    newFruit    gt        setCurrentFruit newFruit           return        lt form gt         lt select          onChange   event    gt  changeFruit event target value           value  currentFruit         gt           lt option value  quot apples quot  gt Red Apples lt  option gt           lt option value  quot oranges quot  gt Outrageous Oranges lt  option gt           lt option value  quot tomatoes quot  gt Technically a Fruit Tomatoes lt  option gt           lt option value  quot bananas quot  gt Bodacious Bananas lt  option gt         lt  select gt       lt  form gt         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      gt      const  currentFruit  setCurrentFruit    useState fruitDetector       const changeFruit    newFruit    gt        setCurrentFruit newFruit           return        lt form gt         lt select          onChange   event    gt  changeFruit event target value           value  currentFruit         gt           lt option value  quot apples quot  gt Red Apples lt  option gt           lt option value  quot oranges quot  gt Outrageous Oranges lt  option gt           lt option value  quot tomatoes quot  gt Technically a Fruit Tomatoes lt  option gt           lt option value  quot bananas quot  gt Bodacious Bananas lt  option gt         lt  select gt       lt  form gt         Then import the FruitSelectDropdown elsewhere in your app import React from  react  import   FruitSelectDropdown   from     path to FruitSelectDropdown   const App        gt      return        lt div className  quot page-container quot  gt         lt h1 className  quot header quot  gt A webpage about fruit lt  h1 gt         lt div className  quot section-container quot  gt           lt h2 gt Pick your favorite fruit lt  h2 gt           lt FruitSelectDropdown fruitDetector  bananas    gt          lt  div gt       lt  div gt         export default App   FruitSelectDropdown with Typescript import React    FC  useState   from  react   type FruitProps       fruitDetector  string     export const FruitSelectDropdown  FC lt FruitProps gt       fruitDetector      gt      const  currentFruit  setCurrentFruit    useState fruitDetector       const changeFruit    newFruit  string   void   gt        setCurrentFruit newFruit           return        lt form gt         lt select          onChange   event    gt  changeFruit event target value           value  currentFruit         gt           lt option value  quot apples quot  gt Red Apples lt  option gt           lt option value  quot oranges quot  gt Outrageous Oranges lt  option gt           lt option value  quot tomatoes quot  gt Technically a Fruit Tomatoes lt  option gt           lt option value  quot bananas quot  gt Bodacious Bananas lt  option gt         lt  select gt       lt  form gt         Then import the FruitSelectDropdown elsewhere in your app import React    FC   from  react  import   FruitSelectDropdown   from     path to FruitSelectDropdown   const App  FC        gt      return        lt div className  quot page-container quot  gt         lt h1 className  quot header quot  gt A webpage about fruit lt  h1 gt         lt div className  quot section-container quot  gt           lt h2 gt Pick your favorite fruit lt  h2 gt           lt FruitSelectDropdown fruitDetector  bananas    gt          lt  div gt       lt  div gt         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        gt      const   i18n     useTranslation     const i18nLanguage   i18n language   const  currentI18nLanguage  setCurrentI18nLanguage    useState i18nLanguage       const changeLanguage    language  string   void   gt        i18n changeLanguage language      setCurrentI18nLanguage language           return        lt form gt         lt select          onChange   event    gt  changeLanguage event target value           value  currentI18nLanguage         gt           lt option value  quot en quot  gt English lt  option gt           lt option value  quot de quot  gt Deutsch lt  option gt           lt option value  quot es quot  gt Espa  ol lt  option gt           lt option value  quot fr quot  gt Fran  ais lt  option gt         lt  select gt       lt  form gt          An invaluable resource for React Typescript

User · Answer

Implement your Dropdown as    lt select id    dropdown  ref     input   gt  this menu   input  gt       lt option value  N A  gt N A lt  option gt       lt option value  1  gt 1 lt  option gt       lt option value  2  gt 2 lt  option gt       lt option value  3  gt 3 lt  option gt       lt option value  4  gt 4 lt  option gt   lt  select gt    Now  to obtain the selected option value of the dropdown menu just use   let res   this menu value

User · Answer

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   gt        this setState   selectedOption         console log  Option selected    selectedOption          render         const   selectedOption     this state       return          lt Select         value  selectedOption          onChange  this handleChange          options  options          gt                 And you can check it out on this site

User · Answer

Just use onChange event of the  lt select gt  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   gt     http   facebook github io react docs more-about-refs html

User · Answer

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   quot banana quot                           this handleChange   this handleChange bind this                      handleChange e            console log  quot Fruit Selected   quot            this setState   fruit  e target value                        render             return              lt div id  quot App quot  gt               lt div className  quot select-container quot  gt                 lt select value  this state fruit  onChange  this handleChange  gt                   options map  option    gt                       lt option value  option value  gt  option label  lt  option gt                                     lt  select gt               lt  div gt             lt  div gt                                    export default App

User · Answer

Using React Functional Components  const  option setOption    useState    function handleChange event       setOption event target value      lt select name  option  onChange  handleChange  gt       lt option value  quot 1 quot  gt 1 lt  option gt       lt option value  quot 2 quot  gt 2 lt  option gt       lt option value  quot 3 quot  gt 3 lt  option gt       lt option value  quot 4 quot  gt 4 lt  option gt   lt  select gt

[javascript] How to get selected value of a dropdown menu in ReactJS

Examples related to javascript

Examples related to select

Examples related to drop-down-menu

Examples related to menu

Examples related to reactjs