0

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!

1
  • Hey, can you check my answer, please? If you have any questions - feel free to ask :) Commented Nov 15, 2019 at 9:55

1 Answer 1

0

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} />.

  1. Here's is described how to create such a custom component in the official redux-form documentation.
  2. 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 ?
  3. 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
    />
  )
};
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.