0

I have a material-ui dropdown menu inside a redux-form, and I want to initialize its value. I am getting both the value that I want [exercise.exercise_type_id and exercise.exercise_type_name] and the list of available options [types, array of objects with id and name properties, among others] by dispatching two actions:

componentWillMount(){
    this.props.actions.exercise.fetchInfo(this.props.params.exerciseId);
    this.props.actions.exercise.fetchAllTypes();
};

Ideally I would like to have somewhere something like:

_.map(this.props.types, (type) =>{
            if (type.id == this.props.exercise.exercise_type_id){
                this.setState({
                    dropDownValue: type.name
                });
            }
        }); 

but only for the initial state, since we want to handle changes with handleDropDownChange.

[Of course I would appreciate something like

state = {
    dropDownValue: {this.props.exercise.exercise_type_name}
};

but I know this is an anti-pattern. But anyway it doesn't work, props are still empty.]

My dropdown is like this:

<DropDownMenu {...exercise_type_name} //does nothing
        value={dropDownValue}
        onChange={onDropDownChange}>
    {_.map(types, (type) => {
        return <MenuItem key={type.id} value={type.name} primaryText={type.name}/>;
    })}

More code:

//...

state = {
        dropDownValue: ''
    };

//...

handleDropDownChange = (event, index, value) => {
        this.setState({
            dropDownValue: value
        });
    };

//...

  function mapStateToProps(state){
    return {
        exercise: getExerciseInfo(state),
        initialValues: getExerciseInfo(state),
        request: getExRequest(state),
        types: getExTypes(state)
    };
}

//....

export default reduxForm({
    form: 'EditExerciseForm',
    fields: ['exercise_type_name', 'max_errors_percentage', 'min_speed']
}, mapStateToProps, mapDispatchToProps)(ExerciseEdit);

1 Answer 1

1

Ah, turned out simpler than what I expected.

This fixed my issue:

In the DropDownMenu component its value should be like:

value={dropDownValue || exercise_type_name.value}
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.