反应选择选项未被选中

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: ''
}

Answer 1

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