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
– 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 component but it didn't. — RamAlx
– 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 component. — Mayank Shukla
– Mayank Shukla, Commented Apr 7, 2017 at 8:46
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
– RamAlx, Commented Apr 7, 2017 at 9:20

RemEmber · Accepted Answer · 2017-05-18 08:59:05Z

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, 2017 at 8:59

answered Apr 7, 2017 at 12:40

RemEmber

6657 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

RamAlx Over a year ago

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 Over a year ago

To be more specific should i add initialValue = {props.initialValue } and then in my component initialValue={{label: 'Any, value: 'Any}}?

RemEmber Over a year ago

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 Over a year ago

yea, but this was for react-select 1.x and 2.x.

tmueller · Accepted Answer · 2017-05-10 04:01:44Z

2

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}
  />
);

answered May 10, 2017 at 4:01

tmueller

5121 gold badge5 silver badges8 bronze badges

Collectives™ on Stack Overflow

Default Value in react-select

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related