Async Select Options

async-select-options.jsx

import React from 'react';
import { Select } from 'uniform';

class SomeForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      favStarwarsCharacter: null,
      isLoadingOptions: false,
      options: [],
    };
  }

  toggleIsLoadingOptions() {
    this.setState({
      isLoadingOptions: !this.state.isLoadingOptions,
    });
  }

  async fetchOptions() {
    if (this.state.options.length) return;

    this.toggleIsLoadingOptions();

    const swapiRes = await fetch('https://swapi.co/api/people');

    const swapiResJson = await swapiRes.json();

    const options = swapiResJson.results.map(character => ({
      label: character.name,
      value: character.name.toLowerCase().replace(/\W/, ''),
    }));

    this.setState(
      {
        options,
      },
      this.toggleIsLoadingOptions
    );
  }

  render() {
    return (
      <Select
        name="fav-star-wars-character"
        qaId="qa-fav-star-wars-character"
        id="fav-star-wars-character-select"
        options={this.state.options}
        onOpen={this.fetchOptions}
        isLoading={this.state.isLoadingOptions}
        placeholder="Select your favorite Star Wars character"
        value={t