react-select multiple option

Question

I'm trying to set react-select component for simple select with multiple options but i can't get it working even though it's everything set as docs say. When multi is false, Select works as intended with one value at a time, but when i set multi={true} it shows value as undefined.

When i give in handleChange() event.target.value it gives undefined aswell so thats why i've just used event.value to grab obj property. I'm still newbie to React so any tips about state would be appreciated if i'm doing something wrong here -_-

class StatisticsFilter extends Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState(event.value);
  }

const options =
[
  {
    value: 'foo', label: 'Foo'
  },
  {
    value: 'bar', label: 'Bar'
  },
  {
    value: 'baz', label: 'Baz'
  }
];

  render() {
    return (
          <Select
              value={this.state.value}
              name="filter__statistics"
              options={options}
              onChange={this.handleChange}
              multi={true}
          />
    );
  }
}

Using react-select v. 1.0.0rc.

As a side note, according to [this page](https://facebook.github.io/react/docs/events.html#overview), the event object has no `value` property. — GJK, Nov 26 '16 at 17:00
@GJK well yeh, it should be `event.target.value` but then i'm receiving undefined values — nehel, Nov 26 '16 at 17:12
My mistake. I see you're using a third-party library, not the native `select` tag. Disregard my comments. — GJK, Nov 26 '16 at 17:15
Check it out https://www.npmjs.com/package/multiselect-react-dropdown — Srigar, Apr 13 '19 at 12:54

score 2 · Accepted Answer · edited May 15 '20 at 00:25

2

There seems to be a few problems with your code. Firstly, the onChange callback will be passed in the value directly instead of the event. Secondly, an object has to be passed to setState.

Could you try changing your handleChange method to the following instead?

handleChange(value) {
  this.setState({ value });
}

You can also follow the example code for the Multiselect usage here.

edited May 15 '20 at 00:25

m0g3ns

44
7

answered Nov 26 '16 at 17:30

Yangshun Tay

49,270
33
114
141

1

Indeed, all i had to do was to change `even` parameter into `value` -_- should go sleep prooly – nehel Nov 26 '16 at 17:47

KhogaEslam · Answer 2 · 2018-06-27T10:15:46.440

In the following example, you have to check for old state and update to new values, but we can't change in state directly, so we have to use new value to use it in

setState()

https://codepen.io/KhogaEslam/pen/PayjXW

class FlavorForm extends React.Component {
  constructor(props) {
    super(props)
    this.state = { value: [''] }

    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  handleChange(event) {
    let newVal = event.target.value
    let stateVal = this.state.value

    console.log(stateVal)
    console.log(newVal)

    stateVal.indexOf(newVal) === -1
      ? stateVal.push(newVal)
      : stateVal.length === 1
        ? (stateVal = [])
        : stateVal.splice(stateVal.indexOf(newVal), 1)

    this.setState({ value: stateVal })
  }

  handleSubmit(event) {
    alert('Your favorite flavor is: ' + this.state.value)
    event.preventDefault()
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Pick your favorite La Croix flavor:
          <select
            multiple={true}
            value={this.state.value}
            onChange={this.handleChange}
          >
            <option value="" />
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
        <input type="submit" value="Submit"/>
      </form>
    )
  }
}

ReactDOM.render(
  <FlavorForm />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


<div id="root"></div>

react-select multiple option

2 Answers2