Can a redux-form accept multiple values from a react-select component? - redux-form

Question

I'm hoping to display multiple values from a react-select component in my redux-form and then pass those values to a function that will update state. Is this possible? Can a redux-form take multiple inputs?
Thanks!

Answer 1

Yes, it's possible. You have to create a custom component, that will wrap react-select and will use the props, passed down by redux-form <Field component={YourCustomComponent} />.
Here's is described how to create such a custom component in the official redux-form documentation.
Here, you will find such already implemented components, these wrap react-select and connects them with redux-form: ReactJS: How to wrap react-select in redux-form field ?
In order to handle multi values, please refer to this SO answer.
Basically, the code example from resource 3. (credits to the author) should be enough for integrating react-select + redux-form + handling multi values:
SelectInput.js
import React from 'react';
import Select from 'react-select';
import 'react-select/dist/react-select.css';
export default (props) => (
<Select
{...props}
value={props.input.value}
onChange={(value) => props.input.onChange(value)}
onBlur={() => props.input.onBlur(props.input.value)}
options={props.options}
/>
);
MyAwesomeComponent.js
import React, {PureComponent} from 'react';
import SelectInput from './SelectInput.js';
class MyAwesomeComponent extends PureComponent {
render() {
const options = [
{'label': 'Germany', 'value': 'DE'},
{'label': 'Russian Federation', 'value': 'RU'},
{'label': 'United States', 'value': 'US'}
];
return (
<Field
name='countries'
options={options}
component={SelectInput}
multi
/>
)
};