React JSX selecting selected on selected select option

Question

In a React component for a  lt select gt  menu  I need to set the selected attribute on the option that reflects the application state   In render    the optionState is passed from the state owner to the SortMenu component  The option values are passed in as props from JSON   render  function       var options             optionState   this props optionState     this props options forEach function option        var selected    optionState     option value      selected             options push         lt option value  option value  selected  gt  option label  lt  option gt                   pass  options  to the select menu jsx   However that triggers a syntax error on JSX compilation   Doing this gets rid of the syntax error but obviously doesn t solve the problem   var selected    optionState     option value     selected     false     lt option value  option value  selected  selected  gt  option label  lt  option gt    I also tried this   var selected    optionState     option value    true   false    lt option value  option value   selected    selected        gt  option label  lt  option gt    Is there a recommended way of solving this

User · Answer

I have a simple solution is following the HTML basic.

<input
  type="select"
  defaultValue=""
  >
  <option value="" disabled className="text-hide">Please select</option>
  <option>value1</option>
  <option>value1</option>
</input>

.text-hide is a bootstrap's class, if you not using bootstrap, here you are:

.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

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  Since this whole thread has been giving fruit 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

React makes this even easier for you  Instead of defining selected on each option  you can  and should  simply write value  optionsState  on the select tag itself   lt select value  optionsState  gt     lt option value  quot A quot  gt Apple lt  option gt     lt option value  quot B quot  gt Banana lt  option gt     lt option value  quot C quot  gt Cranberry lt  option gt   lt  select gt   For more info  see the React select tag doc  Also  React automatically understands booleans for this purpose  so you can simply write  note  not recommended   lt option value  option value  selected  optionsState    option value  gt  option label  lt  option gt   and it will output  selected  appropriately

User · Answer

Posting a similar answer for MULTISELECT   optgroups   render       return       lt div gt         lt select defaultValue  1  onChange   e    gt  this props changeHandler e target value    gt           lt option disabled  disabled  value  1  hidden  hidden  gt -- Select -- lt  option gt           lt optgroup label  Group 1  gt             options1           lt  optgroup gt           lt optgroup label  Group 2  gt             options2           lt  optgroup gt         lt  select gt       lt  div gt

User · Answer

I got around a similar issue by setting defaultProps   ComponentName defaultProps       propName          lt select value  this props propName       So now I avoid errors on compilation if my prop does not exist until mounting

User · Answer

You could do what React warns you when you try to set the  selected  property of the  lt option gt       Use the defaultValue or value props on  lt select gt  instead of setting selected on  lt option gt     So  you can use options value on the defaultValue of your select

User · Answer

With React 16 8  We can do this with hooks like the following example Codesandbox link import React    useState   from  quot react quot   import  quot   styles css quot    export default function App       const options          quot Monty Python and the Holy Grail quot        quot Monty Python s Life of Brian quot        quot Monty Python s The Meaning of Life quot         const filmsByTati                 id  1        title   quot Jour de f  te quot         releasedYear  1949                    id  2        title   quot Play time quot         releasedYear  1967                    id  3        releasedYear  1958        title   quot Mon Oncle quot               const  selectedOption  setSelectedOption    useState options 0      const  selectedTatiFilm  setSelectedTatiFilm    useState filmsByTati 0      return        lt div className  quot App quot  gt         lt h1 gt Select Example lt  h1 gt         lt select         value  selectedOption          onChange   e    gt  setSelectedOption e target value          gt           options map  option    gt               lt option key  option  value  option  gt               option             lt  option gt                     lt  select gt         lt span gt Selected option   selectedOption  lt  span gt          lt select         value  selectedTatiFilm          onChange   e    gt            setSelectedTatiFilm              filmsByTati find film   gt   film id    e target value                                gt           filmsByTati map  film    gt               lt option key  film id  value  film id  gt               film title             lt  option gt                     lt  select gt         lt span gt Selected option   selectedTatiFilm title  lt  span gt       lt  div gt

User · Answer

I ve had a problem with  lt select gt  tags not updating to the correct  lt option gt  when the state changes  My problem seemed to be that if you render twice in quick succession  the first time with no pre-selected  lt option gt  but the second time with one  then the  lt select gt  tag doesn t update on the second render  but stays on the default first    I found a solution to this using refs  You need to get a reference to your  lt select gt  tag node  which might be nested in some component   and then manually update the value property on it  in the componentDidUpdate hook   componentDidUpdate      let selectNode   React findDOMNode this refs selectingComponent refs selectTag     selectNode value   this state someValue

User · Answer

Html      lt div id  divContainer  gt  lt  div gt   var colors      Name   Red       Name   Green       Name   Blue      var selectedColor    Green    ReactDOM render  lt Container gt  lt  Container gt   document getElementById  divContainer      var Container   React createClass       render  function              return            lt div gt                           lt DropDown data  colors  Selected  selectedColor  gt  lt  DropDown gt           lt  div gt                  Option 1     var DropDown   React createClass        render  function              var items   this props data          return            lt select value  this props Selected  gt                                items map function  item                        return  lt option value  item Name   gt  item Name  lt  option gt                                             lt  select gt                  Option 2     var DropDown   React createClass        render  function              var items   this props data          return            lt select gt                                items map function  item                        return  lt option value  item Name  selected  selectedItem    item Name  gt  item Name  lt  option gt                                             lt  select gt                  Option 3     var DropDown   React createClass                render  function                  var items   this props data              return                lt select gt                                        items map function  item                                                 if  selectedItem    item Name                      return  lt option value  item Name   selected gt  item Name  lt  option gt                   else                     return  lt option value  item Name   gt  item Name  lt  option gt                                                         lt  select gt

User · Answer

Use defaultValue to preselect the values for Select   lt Select defaultValue     value  category published  label   Publish      options  statusOptions  onChange  handleStatusChange    gt

User · Answer

Here is a complete solution which incorporates the best answer and the comments below it  which might help someone struggling to piece it all together    UPDATE FOR ES6  2019  - using arrow functions and object destructuring  in main component   class ReactMain extends React Component      constructor props        super props       this state     fruit  props item fruit           handleChange    event    gt        this setState    event target name   event target value            saveItem        gt        const item           item fruit   this state fruit         do more with item object as required  e g  save to database         render         return          lt ReactExample name  fruit  value  this state fruit  handleChange  this handleChange    gt                 included component  which is now a stateless functional    export const ReactExample      name  value  handleChange      gt       lt select name  name  value  value  onChange  handleChange  gt       lt option value  A  gt Apple lt  option gt       lt option value  B  gt Banana lt  option gt       lt option value  C  gt Cranberry lt  option gt     lt  select gt      PREVIOUS ANSWER  using bind    in main component   class ReactMain extends React Component      constructor props        super props          bind once here  better than multiple times in render     this handleChange   this handleChange bind this       this state     fruit  props item fruit           handleChange event        this setState    event target name   event target value            saveItem         const item           item fruit   this state fruit         do more with item object as required  e g  save to database         render         return          lt ReactExample name  fruit  value  this state fruit  handleChange  this handleChange    gt                 included component  which is now a stateless functional    export const ReactExample    props    gt       lt select name  props name  value  props value  onChange  props handleChange  gt       lt option value  A  gt Apple lt  option gt       lt option value  B  gt Banana lt  option gt       lt option value  C  gt Cranberry lt  option gt     lt  select gt      the main component maintains the selected value for fruit  in state   the included component displays the select element and updates are passed back to the main component to update its state  which then loops back to the included component to change the selected value    Note the use of a name prop which allows you to declare a single handleChange method for other fields on the same form regardless of their type

User · Answer

Here is the latest example of how to do it  From react docs  plus auto-binding  fat-arrow  method syntax    class FlavorForm extends React Component     constructor props        super props       this state    value   coconut           handleChange    event    gt      this setState  value  event target value       handleSubmit    event    gt        alert  Your favorite flavor is      this state value       event preventDefault           render         return          lt form onSubmit  this handleSubmit  gt           lt label gt            Pick your favorite flavor             lt select value  this state value  onChange  this handleChange  gt               lt option value  grapefruit  gt Grapefruit lt  option gt               lt option value  lime  gt Lime lt  option gt               lt option value  coconut  gt Coconut lt  option gt               lt option value  mango  gt Mango lt  option gt             lt  select gt           lt  label gt           lt input type  submit  value  Submit    gt         lt  form gt

User · Answer

Simply add as first option of your select tag    lt option disabled hidden value    gt  lt  option gt    This will become default and when you ll select a valid option will be setted on your state

[javascript] React JSX: selecting "selected" on selected <select> option

Examples related to javascript

Examples related to reactjs