React-select option not getting selected

Question

I am using the react-select package. When i select a drop-down option, my onChange action works correctly and updates the state. But the option is not getting selected. Meaning, it doesn't show the value which is mapped to the state, instead just the default placeholder.

I think i'm missing something small, but i'm some what new to react and redux and i'm not sure what this could be. Thanks for the help in advance :)

Body.js

<Select id="input-field" value={this.props.create.selectedOption} onChange={this.props.addOption}
   options={[
      { value: 'navigate', label: 'Navigate to <URL>' },
      { value: 'enter', label: 'I enter <InputValue> to the <ElementKey>' },
      { value: 'click', label: 'Click on <ElementKey>' },
      ]}
/>


const mapStateToProps = (state, ownProps) => {
    return {
        create: state.reducerCreate
    }
}

Reducer.js

const initialState = {
    feature: '',
    scenarios: [],
    activeIndex: '',
    selectedOption: ''
}

Is your redux store getting updated ? It's better if you control the <Select> component using state rather than props — Dane
Then maybe this.props.create.selectedOption is undefined ? Like I said, it's better if you use this.state to manage the Select component as only that will get re-rendered, instead of changing props — Dane

Niveditha Karmegam Niveditha Karmegam · Accepted Answer · 2017-12-29T07:08:09

Answering my own question, I found out that just passing the selected options label/value is not enough we need pass the entire object;

{ value: 'navigate', label: 'Navigate to <URL>' }

Then we map our select tag's value attribute with the state's value.

Updated Body.js;

<Select id="input-field" componentClass="select" value={this.props.create.selectedOption.value} onChange={this.props.addOption}


const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        addOption: (option) => {
            console.log(option)
            dispatch(addOption(option))
        }
    };
};

React-select option not getting selected

1 Answers