Cannot select option from extremely simple list (codesandbox available)

Why in the world doesn’t this work? https://codesandbox.io/s/qzz927y0w9

import React, { Component, Fragment } from "react";
import Select from "react-select";

export default class SingleSelect extends Component {
  state = { selectedOption: "blue" };

  render() {
    const options = ["red", "blue", "green"];
    console.log("selected option is", this.state.selectedOption);
    return (
      <Select
        options={options}
        value={this.state.selectedOption}
        onChange={selectedOption => this.setState({ selectedOption })}
        getOptionLabel={option => option}
        getOptionValue={option => option}
      />
    );
  }
}

[sarink]

One more annoyance with this “you must convert options to objects” is that if you’re using a type system, you have to routinely cast between the “option-version” and the “normal-version” of your objects. Eg, If I have my colors declared as an enum, I have to also create a “color-option” type, store ColorEnums in the component state, convert them to ColorOption in render, then cast them inside my onChange handler and my convertColorToOption function. It ends up being quite a bit of code where the end result is simply… a dropdown list.

Building a simple dropdown list of strings seems like a very common use case to me, and imo the library should address this in a more convenient manner.

I’d love to see something like this Just Work:

return (
      <Select
        options={options}
        value={this.state.selectedOption}
        onChange={selectedOption => this.setState({ selectedOption })}
      />
);

[Rall3n]

@sarink

This does not work because of the function cleanValue from utils.js. It expects the value to be an object.

You could use a wrapper function around your values to convert them to objects and update state with the value of the object.

const arrToOption = opt => ({ value: opt, label: opt });

export default class SingleSelect extends Component {
  state = { selectedOption: "blue" };

  render() {
    const options = ["red", "blue", "green"];
    
    return (
      <Select
        options={options.map(arrToOption)}
        value={arrToOption(this.state.selectedOption)}
        onChange={selectedOption =>
          this.setState({ selectedOption: selectedOption.value })
        }
      />
    );
  }
}

CodeSandbox