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.

Solution 1

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.

Solution 2

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>