React Select with Redux React form

Question

I am trying to integrate react-select with react redux form (https://github.com/davidkpiano/react-redux-form)

This is my current component set up and I am passing props to it from another component.

...
 <MultiSelect model="event.category" options={this.props.categoryList} />
...

Multi select component

import React, {Component} from 'react';
import {Control} from 'react-redux-form';
import Select from 'react-select';
import 'react-select/dist/react-select.css';

class MultiSelect extends Component {
    constructor(props) {
        super(props);
        this.state = {categoryValue: []};
    }

    handleSelectChange = value => {
        this.setState({categoryValue: value});
    };

    render() {
        let reactSelect = props => (
            <Select
                {...props}
            />
        );

        return (
            <div className="form__row">
                <div className="form__label">
                    <span className="form__title">
                        {this.props.title}
                        {this.props.isRequired ? (
                            <span className="form__required">*</span>
                        ) : (
                            ''
                        )}
                    </span>
                </div>
                <Control.custom
                    model={this.props.model}
                    id={this.props.model}
                    component={reactSelect}
                    simpleValue
                    multi
                    value={this.state.categoryValue}
                    options={this.props.options}
                    onChange={this.handleSelectChange}
                    joinValues
                    name={this.props.model}
                    required
                />
            </div>
        );
    }
}

export default MultiSelect;

My problem is that I can't seem to grab the value of that hidden text field in my react redux form state. What could I be missing?

Here is the code sandbox too https://codesandbox.io/s/ww4wqyp02l

Answer 1

From the documentation;

If you do not want any standard property mappings (such as onChange, onBlur, etc.) passed down to your custom control component, use and define your own mappings:

<Control.custom
  component={SpecialCustomText}
  mapProps={{
    onTextChange: (props) => props.onChange,
    onLoseFocus: (props) => props.onBlur,
    // etc.
  }} 
/>

Also, you needed a submit button on which you can retrieve the value from the MultiSelect component that you've made.

I've made changes to reflect these changes on your codesandbox here