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!
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!
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} />.
redux-form documentation.react-select and connects them with redux-form: ReactJS: How to wrap react-select in redux-form field ?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
/>
)
};