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 => (
<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}
selectedValue={props.selectedValue}
/>
);
and here how I render it:
<div className="select-box__container">
<Field
id="side"
name="side"
component={SelectInput}
options={sideOptions}
clearable={false}
placeholder="Select Side"
selectedValue={label: 'Any', value: 'Any'}
/>
</div>
But the problem is that that my dropdown has not a default value as I wish. What I'm doing wrong? Any ideas?
I guess you need something like this:
const MySelect = props => (
<Select
{...props}
value = {
props.options.filter(option =>
option.label === 'Some label')
}
onChange = {value => props.input.onChange(value)}
onBlur={() => props.input.onBlur(props.input.value)}
options={props.options}
placeholder={props.placeholder}
/>
);
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.
<Select
name="form-dept-select"
options={depts}
defaultValue={{ label: "Select Dept", value: 0 }}
onChange={e => {
this.setState({
department: e.label,
deptId: e.value
});
}}
/>
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'}.