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

Raghudevan Shankar Raghudevan Shankar · Accepted Answer · 2017-11-21T07:24:58

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

React Select with Redux React form

1 Answers