reactjsdefault-valuereact-select

How to set a default value in react-select


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?


Solution

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

    #EDIT 1 : In the new version

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