React-select: Can not get last item when remove from multi select options

Created on 7 Jun 2017  ·  5Comments  ·  Source: JedWatson/react-select

Hi, i can not get the last removed object from multi select.
I can update my state when i select or remove option , here is a screen shot.

screen shot 2017-06-07 at 11 00 10

As you can see, i selected Country and Regional and i got their objects.

Now when i remove some of them it'll return the objects which is not include item that i want to remove. So if i want to remove Country it should return Regional.

screen shot 2017-06-07 at 11 06 26

I removed Country and it returned me the items left which is Regional. So i can find out which data should remove from array and i can remove the Country data from state.
Everything is okay. Now i got just one item left which is Regional. When i try to remove it it returns NOTHING, just an empty array. So it is not possible to find out which data should be removed from state. Here is my problem. I can not get the last removed item.

Any suggestions ?

categorquestion

All 5 comments

Hi @nzhtrtlc do you need to keep track of the last item? Can you always update the state with what is sent from onChange? Also have you tried keep track of this state through life cycle hooks?

@agirton I can update state with what i get from onchange but i have multiple states. So how can i know which state should i set to.. Anyway i solved this problem too in may way 👯‍♂️

@nzhtrtlc ok great. Closing this out since you have solved it on your end.

@nzhtrtlc How did you end up fixing this... I'm seeing the same issue. When multi is true I cannot remove the last item.

cc: @agirton

@bpod As far as i remember when you remove last item it returns null. So you can pass a prop called "identifier" or anything you like.. That way, you can understand which filter is that.
For example;

<Select label="Customers" options={customersArray} value={state.customers} identifier="customer" multi handleChange={this.handleChange}/> handleChange(value, identifier){ this.props.actions.customerSelect(value,identifier); // Redux action. }
You passed identifier so you can know this is a customer action even if it returns null because of the last item. When you remove last item it returns null but you have identifier variable. So you can check the identifier and set null the customer array.

You can use identifier dynamically using es6 computed property. You dont have to check all identifiers you have like this;

if(identifier == 'customers') // WRONG

Use it like this.
this.setState({ [identifier] : value });

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Meesam picture Meesam  ·  3Comments

mbonaci picture mbonaci  ·  3Comments

pablote picture pablote  ·  3Comments

pgoldweic picture pgoldweic  ·  3Comments

steida picture steida  ·  3Comments