i have a react-select ponent which i made patible with redux-form. My SelectInput ponent 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 ponent which is a form

<div className="select-box__container">
                <Field
                  id="side"
                  name="side"
                  ponent={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 ponent has an initial value and it's working. My problem is that when i render the ponent the initial value does not show in the selection box and it's empty. Why is this happenning?

i have a react-select ponent which i made patible with redux-form. My SelectInput ponent 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 ponent which is a form

<div className="select-box__container">
                <Field
                  id="side"
                  name="side"
                  ponent={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 ponent has an initial value and it's working. My problem is that when i render the ponent the initial value does not show in the selection box and it's empty. Why is this happenning?

• javascript
• reactjs
• redux
• redux-form
• react-select

• what u r expecting value 'any' should be selected in Select ? – Mayank Shukla Commented Apr 7, 2017 at 8:39
• exactly, i want to test my select with a value any to see if it is rendered with my ponent but it didn't. – RamAlx Commented Apr 7, 2017 at 8:43
• try this: swap these two lines, instead of {...props} value={props.input.value} use this: value={props.input.value} {...props} in Select ponent. – Mayank Shukla Commented Apr 7, 2017 at 8:46
• @MayankShukla didnt work – RamAlx Commented Apr 7, 2017 at 8:55
• Any other ideas? I think of editing my selectInput like this <Select {...props} tempValue={props.input.value} {tempValue !== undefined ? value={tempValue} : value="Any" } // value={props.input.value} onChange={value => props.input.onChange(value)} // onBlur={() => props.input.onBlur(props.input.value)} options={props.options} placeholder={props.placeholder} // defaultValue="Any" /> but didnt work... – RamAlx Commented Apr 7, 2017 at 9:20

2 Answers 2

What is the shape of your options? - monly 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!

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"
  ponent={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}
  />
);