How To use react-select within redux-form

In this tutorial, we'll see how to use custom components like react-select within redux-form.

So the first thing we need to do is to create a custom component. In our case, we are going to create a component for Select which will fetch data from an API endpoint.

import React, { Component, PropTypes } from 'react';
import axios from 'axios';
import Select from 'react-select';
import 'react-select/dist/react-select.css';

class SelectInputAsync extends Component {
  constructor(props) {
    super(props);
    this.url = this.props.url;
  }
  getOptions() {
    return axios.get(this.url).then(response => {
      return { options: response.data };
    });
  }
  onChange(event) {
    // console.log(event)

    if (this.props.input.onChange && event != null) {
      // To be aligned with how redux-form publishes its CHANGE action payload. The event received is an object with 2 keys: "value" and "label"
      this.props.input.onChange(event.value);
    } else {
      // Clear the input field
      this.props.input.onChange(null);
    }
  }

  render() {
    return (
      <Select.Async
        {...this.props}
        value={this.props.input.value || ''}
        onBlur={() => this.props.input.onBlur(this.props.input.value)}
        onChange={this.onChange.bind(this)}
        loadOptions={this.getOptions.bind(this)}
      />
    );
  }
}

export default SelectInputAsync;

Let's create a simple signup form with a custom component which we just created.

import React, { Component } from 'react';
import { reduxForm, Field } from 'redux-form';
import SelectInputAsync from './SelectInputAsync';

export class SignUpForm extends Component {
  constructor(props) {
    super(props);
  }
  onFormSubmit(formData) {
    // Dispatch an action
    console.log(formData);
  }
  render() {
    const { handleSubmit } = this.props;
    return (
      <form onSubmit={onFormSubmit}>
        <Field
          name="country"
          component={SelectInputAsync}
          url="https://api.myjson.com/bins/4gzai"
        />
      </form>
    );
  }
}
export default reduxForm({
  form: 'signup',
})(SignUpForm);