Default Value in react-select

Question

i have a react-select component which i made compatible with redux-form. My SelectInput component is this:

const MySelect = props => (
  <Select
    {...props}
    value={props.input.value}
    onChange={value => props.input.onChange(value)}
    onBlur={() => props.input.onBlur(props.input.value)}
    options={props.options}
    placeholder={props.placeholder}
  />
);

and i render it in my component which is a form

<div className="select-box__container">
                <Field
                  id="side"
                  name="side"
                  component={SelectInput}
                  options={sideOptions}
                  value="Any"
                  clearable={false}
                  // placeholder="Select Side"
                />
              </div>

I've also set initial values to the container so as the state for this component has an initial value and it's working. My problem is that when i render the component the initial value does not show in the selection box and it's empty. Why is this happenning?

what u r expecting value 'any' should be selected in Select ? — Mayank Shukla, Apr 07 '17 at 08:39
exactly, i want to test my select with a value any to see if it is rendered with my component but it didn't. — RamAlx, Apr 07 '17 at 08:43
try this: swap these two lines, instead of `{...props} value={props.input.value}` use this: `value={props.input.value} {...props}` in Select component. — Mayank Shukla, Apr 07 '17 at 08:46
Any other ideas? I think of editing my selectInput like this — RamAlx, Apr 07 '17 at 09:20
Possible duplicate of [How to set a default value in react-select](https://stackoverflow.com/questions/43495696/how-to-set-a-default-value-in-react-select) — T. D. Ben, Jun 05 '17 at 09:18

RemEmber · Answer 1 · 2017-05-18T08:59:05.370

4

What is the shape of your options? - commonly it is an array of objects with a value and a label property:

[
  { label: "I like", value: "icecream" },
  { label: "Any", value: "Any" }
]

You can set the initial value prop of react-select by setting it to one of the values in your options array. Alternatively, you can as well set it to a non existing option, by giving it an object with a label and a value. The label is what is displayed as the value of the select. Indeed a little bit confusing, though it makes kind of some sense.

TL;DR

value={{ value: 0, label: 'Any' }} - will do the trick!

You can as well set the initial value to a value of your options and it will get displayed. Meaning if you have { value: "Any", label: "Any" } in your options value={'Any'} would display "Any" in the select.

Hope this works for you!

edited May 18 '17 at 08:59

answered Apr 07 '17 at 12:40

RemEmber

665
7
14

My options is an array of objects like this:const sideOptions = [ { label: 'Any', value: 'Any' }, { label: 'Buy', value: 'Buy' }, { label: 'Sell', value: 'Sell' } ];. I want by SelectInput to be label:Any with value Any. I've set value={{ value=0, label='Any' }} but it didn't work finally – RamAlx Apr 18 '17 at 07:48
To be more specific should i add initialValue = {props.initialValue } and then in my component initialValue={{label: 'Any, value: 'Any}}? – RamAlx Apr 18 '17 at 08:03
sorry for the delayed reply! You can just set `value` prop on react-select to your initial value. There is no `initialValue` prop in react-select. Hope that clears things up for you. – RemEmber May 08 '17 at 13:03
yea, but this was for react-select 1.x and 2.x. – RemEmber Aug 15 '19 at 10:43

score 2 · Answer 2 · answered May 10 '17 at 04:01

Ran into a similar issue. The input value field is constantly unset even though it is properly passed. You can either create an input object that has a value prop (and all other required props) or use a separate prop selectedValue in this case.

 <Field
  id="side"
  name="side"
  component={SelectInput}
  options={sideOptions}
  value="Any"
  clearable={false}
  selectedValue={this.props.myvalue}
 />

const MySelect = props => (
  <Select
   {...props}
   value={(props.input.value) ? props.input.value : props.selectedValue}
   onChange={value => props.input.onChange(value)}
   onBlur={() => props.input.onBlur(props.input.value)}
   options={props.options}
   placeholder={props.placeholder}
  />
);

Default Value in react-select

2 Answers2