How to set default value in response-select

Question

I have a problem using a-select reaction. I use a reduction form, and I have made my reaction-choice component compatible with the reduction 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 is how I visualize 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 my dropdown does not have a default value as I would like. What am I doing wrong? Any ideas?

Answer 1

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

Answer 2

I used the defaultValue parameter, below is the code by which I got the default value, and also updated the default value when the parameter is selected in the drop-down list.

<Select
  name="form-dept-select"
  options={depts}
  defaultValue={{ label: "Select Dept", value: 0 }}
  onChange={e => {
              this.setState({
              department: e.label,
              deptId: e.value
              });
           }}
/>

Answer 3

- v2, - - 2 value, defaultValue ..

value={{value: 'one', label: 'One'}} value={'one'}.

Answer 4

. , value.

<option key={index} value={item}> {item} </option>

selects .

<select 
    value={this.value} />

Answer 5

INIT .

reducex, "-" , , .

Answer 6

var options = [
  { value: 'one', label: 'One' },
  { value: 'two', label: 'Two' }
];

{props.input.value} 'value' {props.options}

, props.input.value 'one', 'two'

Answer 7

redux- , act-select :

class MySelect extends Component {

constructor() {
    super()
}

state = {
     selectedValue: 'default' // your default value goes here
}

render() {
  <Select
       ...
       value={this.state.selectedValue}
       ...
  />
)}

Answer 8

Expanding @ isaac-pak's answer, if you want to pass the default value to your component in props, you can keep it in the state in the componentDidMount () life cycle method to make sure that the default value is selected for the first time.

Please note I updated the following code to make it more complete.

export default class MySelect extends Component {

    constructor(props) {
        super(props);
        this.state = {
            selectedValue: '',
        };
        this.handleChange = this.handleChange.bind(this);

        this.options = [
            {value: 'foo', label: 'Foo'},
            {value: 'bar', label: 'Bar'},
            {value: 'baz', label: 'Baz'}
        ];

    }

    componentDidMount() {
        this.setState({
            selectedValue: this.props.defaultValue,
        })
    }

    handleChange(selectedOption) {
        this.setState({selectedValue: selectedOption.value});
    }

    render() {
        return (
            <Select
                value={this.options.filter(({value}) => value === this.state.selectedValue)}
                onChange={this.handleChange}
                options={this.options}
            />
        )
    }
}

MySelect.propTypes = {
    defaultValue: PropTypes.string.isRequired
};

Answer 9

To automatically select a value in select.

<div className="form-group">
    <label htmlFor="contactmethod">Contact Method</label>
    <select id="contactmethod" className="form-control"  value={this.state.contactmethod || ''} onChange={this.handleChange} name="contactmethod">
    <option value='Email'>URL</option>
    <option value='Phone'>Phone</option>
    <option value="SMS">SMS</option>
    </select>
</div>

Use the value attribute in the select tag

value={this.state.contactmethod || ''}

The solution works for me.