React-select multi not working the way it's defined in the documentation

Question

I am using react-select to make a searchable dropdown menu. And it's working fine until you actually select an option, then it just throws an Each child in an array or iterator should have a unique "key" prop. error, doesn't remove the option you have picked and doesn't show what you have picked so far. My options are an array with objects {value: crew.id, label: crew.code}, and here is my Select component

<Select
    isMulti
    name='teamIdsFilter'
    menuPosition='fixed'
    options={crewOptions}
    value={teamIds}
    placeholder='Nepasirinktas'
    onChange={event => this.handleTeamIdsSelect(event)} />

And my handleTeamIdsSelect event handler

handleTeamIdsSelect = (event) => {
    if (event) {
        const selectedCrew = event.map(crew => crew.value);
        this.setState({teamIds: selectedCrew});
    }
};

after selecting it returns an array with selected object, so everything is ok with updating the state. The react-select component is not working the same way it's described in the documentation. — SnakesCantWearBoots, Aug 30 '18 at 07:20
then you have to double check the complete document, you might have missed some silly things — Amruth, Aug 30 '18 at 07:23
[Actual documentation](https://react-select.com/home#getting-started) I am pretty sure I haven't missed anything, because there isn't much to miss, the component just does not work the same way for me. — SnakesCantWearBoots, Aug 30 '18 at 07:26
@AmruthLS you were right, the event handler was the problem, I only stored the value of the event, when I needed to store the whole event (the array with objects) to the state. But they should have mentioned it in the documentation though, because i thought that it will return the same event as the regular material-ui select would. — SnakesCantWearBoots, Aug 30 '18 at 07:50

score 0 · Answer 1 · answered Oct 28 '20 at 07:10

Check this

const changeSelect2 = (name,value)=>{
    setFormState((preValue)=>{
        return {
        ...preValue, // use spead sign for join 
        [name] : value // lec 43 // https://stackoverflow.com/questions/32515598/square-brackets-javascript-object-key
        }
    });
}

<Select options={crewOptions}  onChange={(res)=>{changeSelect2('teamIdsFilter',res.value)}} name="teamIdsFilter" />

score 0 · Answer 2 · answered Jul 26 '21 at 14:23

0

try this :

        this.state = {
            isMulti:true,
        };


<Select  isMulti={this.state.isMulti}/>

answered Jul 26 '21 at 14:23

Phakamani Xulu

259
5
14

this simply does not make sense is the same as isMulti – Jesús Sep 13 '22 at 05:01

score -1 · Accepted Answer · answered Jul 04 '19 at 09:03

-1

Try using multi instead of isMulti. This will fix the problem.

<Select
    multi
    name='teamIdsFilter'
    menuPosition='fixed'
    options={crewOptions}
    value={teamIds}
    placeholder='Nepasirinktas'
    onChange={event => this.handleTeamIdsSelect(event)} />

answered Jul 04 '19 at 09:03

Nikhil Jacob

40
3

9

Adding `multi` is the same like adding `bananas`; At first I thought you were correct and it made my error disappear; However, it just means your Select component is now single-item select, not multi ! (Checked this with v3.1.0 in Oct/2020) – joedotnot Oct 12 '20 at 11:22

score -1 · Answer 4 · answered Feb 13 '20 at 08:02

-1

try adding

multi={true}

hopefully it will work.

answered Feb 13 '20 at 08:02

Faizy

1
1

Here is the silly thing that worked for me. after isMulti make sure to hit enter again. fixed the problem – mazoula May 16 '21 at 07:20

React-select multi not working the way it's defined in the documentation

4 Answers4