nehel nehel - 8 days ago 5
Javascript Question

react-select multiple option

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
.

Answer

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.

Comments