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 · Accepted Answer · 2017-11-21 07:24:58Z

4

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

answered Nov 21, 2017 at 7:24

Raghudevan Shankar

1,0939 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Raghudevan Shankar Over a year ago

please also mark the answer as useful if you can please :)

Kevin Over a year ago

I believe I did with the green check mark. Is there anything else I need to do?

Collectives™ on Stack Overflow

React Select with Redux React form

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related