Setting up multi-select with react-select

Question

I'm probably just overlooking something, but I am unable to figure out why I can't seem to configure a multi-select with react-select.

Here's a working example of what I'm seeing.

Notice that only one item can be selected on the multiselect, and then the dropdown no longer loads until the current item is cleared. Also, when the item is cleared, and you can see all the options, it looks like the highlight on mouseover no longer works.

Code:

import React from "react";
import { render } from "react-dom";
import Select from "react-select";
import "react-select/dist/react-select.css";

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      multiValue: null,
      filterOptions: [
        { name: "foo", label: "Foo" },
        { name: "bar", label: "Bar" },
        { name: "bat", label: "Bat" }
      ]
    };

    this.handleMultiChange = this.handleMultiChange.bind(this);
  }

  handleMultiChange(option) {
    this.setState(state => {
      return {
        multiValue: option
      };
    });
    console.log(option);
  }

  render() {
    return (
      <div>
        <label>Multi (not working)</label>
        <Select
          name="filters"
          placeholder="Filters"
          value={this.state.multiValue}
          options={this.state.filterOptions}
          onChange={this.handleMultiChange}
          multi
        />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

Solution

You'd set the wrong key name instead of value for the select options

Working example: https://codesandbox.io/s/yj804nzpv

Comments

[StudioTime]

Please include your code in the question. If you ever remove your sandbox this question is useless to future readers.

[jktravis]

Doh! I knew there was something stupid I was doing. Thanks!