react-select: can't map values after selecting an option

user_3046995 0
Viewed 2194

This example of react-tables uses react-select as a custom filter, but after upgrading the version of react-select from v1.2.1 to v2.1.1, I get the error entry.map is not a function on selecting an option from the dropdown.

The select component is below, anyone know why .map no-longer works? 

    <Select
      style={{ width: "50%", marginBottom: "20px" }}
      onChange={entry => {
        console.log(entry);
        this.setState({ select2: entry });
        this.onFilteredChangeCustom(
          entry.map(o => {
             return o.value
          }),
          "firstName"
        );
      }}
      value={this.state.select2}
      multi={true}
      options={this.state.data.map((o, i) => {
        return { id: i, value: o.firstName, label: o.firstName };
      })}
    />
react-select reactjs
2 Answers

Entry is an object, not an array, so you can't use map on it. using entry's value property seems to work.

<Select
      style={{ width: "50%", marginBottom: "20px" }}
      onChange={entry => {
        this.setState({ select2: entry });
        this.onFilteredChangeCustom(
          entry.value,
          "firstName"
        );
      }}
      value={this.state.select2}
      multi={true}
      options={this.state.data.map((o, i) => {
        return { id: i, value: o.firstName, label: o.firstName };
      })}
    />
user_66047770

Remove the multi={true} prop and replace it with isMulti.

I had the same error, this has worked for me

user_83253940
Related