How to set a default value in react-select

Question

I have an issue using react-select  I use redux form and I ve made my react-select component compatible with redux form  Here is the code   const MySelect   props   gt         lt Select             props          value  props input value          onChange  value   gt  props input onChange value           onBlur       gt  props input onBlur props input value           options  props options          placeholder  props placeholder          selectedValue  props selectedValue        gt       and here how I render it    lt div className  select-box  container  gt       lt Field     id  side      name  side      component  SelectInput      options  sideOptions      clearable  false      placeholder  Select Side      selectedValue  label   Any   value   Any         gt   lt  div gt    But the problem is that that my dropdown has not a default value as I wish  What I m doing wrong  Any ideas

User · Answer

If your options are like this  var options         value   one   label   One         value   two   label   Two         Your  props input value  should match one of the  value  in your  props options   Meaning  props input value should be either  one  or  two

User · Answer

I just went through this myself and chose to set the default value at the reducer INIT function    If you bind your select with redux then best not  de-bind  it with a select default value that doesn t represent the actual value  instead set the value when you initialize the object

User · Answer

To auto-select the value of in select       lt div className  form-group  gt       lt label htmlFor  contactmethod  gt Contact Method lt  label gt       lt select id  contactmethod  className  form-control   value  this state contactmethod        onChange  this handleChange  name  contactmethod  gt       lt option value  Email  gt URL lt  option gt       lt option value  Phone  gt Phone lt  option gt       lt option value  SMS  gt SMS lt  option gt       lt  select gt   lt  div gt    Use the value attribute in the select tag  value  this state contactmethod          the solution is working for me

User · Answer

You need to do deep search if you use groups in options  options        value   all   label   All             label   Specific       options            value   one   label   One             value   two   label   Two             value   three   label   Three                     const deepSearch    options  value  tempObj         gt      if  options  amp  amp  value    null        options find  node    gt          if  node value     value            tempObj found   node          return node                return deepSearch node options  value  tempObj               if  tempObj found          return tempObj found              return undefined

User · Answer

If you are not using redux-form and you are using local state for changes then your react-select component might look like this   class MySelect extends Component    constructor         super      state          selectedValue   default     your default value goes here    render        lt Select                   value  this state selectedValue                 gt

User · Answer

Create a state property for the default option text in the constructor   Don t worry about the default option value  Add an option tag to the render function  Only show using state and ternary expression Create a function to handle when an option was selected Change the state of the default option value in this event handler function to null  Class MySelect extends React Component       constructor                 super           this handleChange   this handleChange bind this           this state                 selectDefault   Select An Option                      handleChange event                const selectedValue   event target value            do something with selectedValue         this setState               selectDefault  null                       render                 return            lt select name  selectInput  id  selectInput  onChange  this handleChange  value                this selectedValue  gt            this state selectDefault    lt option gt  this state selectDefault  lt  option gt                      map list or static list of options here            lt  select gt

User · Answer

Extending on  isaac-pak s answer  if you want to pass the default value to your component in a prop  you can save it in state in the componentDidMount   lifecycle method to ensure the default is selected the first time   Note  I ve updated the following code to make it more complete and to use an empty string as the initial value per the comment   export default class MySelect extends Component        constructor props            super props           this state                 selectedValue                         this handleChange   this handleChange bind this            this options                  value   foo   label   Foo                 value   bar   label   Bar                 value   baz   label   Baz                          componentDidMount             this setState               selectedValue  this props defaultValue                        handleChange selectedOption            this setState  selectedValue  selectedOption target value               render             return                lt Select                 value  this options filter   value     gt  value     this state selectedValue                   onChange  this handleChange                  options  this options                gt                     MySelect propTypes         defaultValue  PropTypes string isRequired

User · Answer

I used the defaultValue parameter  below is the code how I achieved a default value as well as update the default value when an option is selected from the drop-down    lt Select   name  form-dept-select    options  depts    defaultValue    label   Select Dept   value  0      onChange  e   gt                  this setState                 department  e label                deptId  e value                                   gt

User · Answer

If you ve come here for react-select v2  and still having trouble - version 2 now only accepts an object as value  defaultValue  etc   That is  try using value   value   one   label   One     instead of just value   one

User · Answer

Use defaultInputValue props like so   lt Select    name  quot name quot     isClearable    onChange  handleChanges     options  colourOptions     isSearchable  quot true quot     placeholder  quot Brand Name quot     defaultInputValue  quot defaultInputValue quot    gt               for more reference https   www npmjs com package react-select

User · Answer

I m using frequently something like this      Default value from props in this example   if Defaultvalue    item value        return  lt option key  item key  defaultValue value  item value  gt  plantel value   lt  option gt       else       return  lt option key  item key  value  item value  gt  plantel value   lt  option gt

User · Answer

I guess you need something like this   const MySelect   props   gt     lt Select         props      value  props options filter option   gt  option label      Some label        onChange  value   gt  props input onChange value       onBlur       gt  props input onBlur props input value       options  props options      placeholder  props placeholder      gt

User · Answer

I was having a similar error   Make sure your options have a value attribute    lt option key  index  value  item  gt   item   lt  option gt    Then match the selects element value initially to the options value    lt select      value  this value    gt

[reactjs] How to set a default value in react-select

Examples related to reactjs

Examples related to default-value

Examples related to react-select