2 react-select components on page - one changes value of another

Question

import Select, { components } from "react-select";
...
handleBookKeyWordDropDown (key_wor)  {
    let keys;
    if (key_wor !== null) {
        keys = key_wor;
    } else {
        keys = []
    };
    this.setState({
        currentBook:{
            key_words: keys
        }
    });
}

handleBookBBKDropDown (bbks)  {
    let bks;
    if (bbks !== null) {
        bks = bbks;
    } else {
        bks = []
    };
    this.setState({
        currentBook:{
            bbk: bks
        }
    });
}
...
<div className="row justify-content-end">
    <div className="col-4">
        <label>Ключевые слова:</label>
    </div>
    <div className="col-8">
        <Select
            closeMenuOnSelect={false}
            options={this.state.key_words}
            value={this.state.currentBook.key_words}
            getOptionLabel={ x => x.name}
            getOptionValue={ x => x.id}
            onChange={this.handleBookKeyWordDropDown}
            isMulti
            isSearchable
            placeholder="Выберите ключевые слова"
        />
    </div>
    <div className="row justify-content-end">
        <div className="col-4">
            <label>ББК:</label>
        </div>
        <div className="col-8">
            <Select
                closeMenuOnSelect={false}
                options={this.state.bbk}
                value={this.state.currentBook.bbk}
                getOptionLabel={ x => (x.code+' '+x.description)}
                getOptionValue={ x => x.id}
                onChange={this.handleBookBBKDropDown}
                isMulti
                isSearchable
                placeholder="Выберите ББК"
            />
        </div>
    </div>
</div>

So the logic is: initially every one of them has its own default value, which should be changed while changing selected values.

Issue appears when I change anything in any of Select: if I remove any selected value from any Select, other Select's selected values are being removed. But after that if I add something to anything or remove, everything works fine.

This is how it happens

Have no idea how to deal with it, possibly because of lack of experience with React.

Looking for some help, guys: :)

Answer 1

You have currentBook as an object which store the value of both select fields and onChange you are creating a new object with single select value overriding the second select value

Change your code to this

handleBookBBKDropDown (bbks)  {
    let bks;
    if (bbks !== null) {
        bks = bbks;
    } else {
        bks = []
    };
    this.setState({
        currentBook:{
            ...this.state.currentBook, bbk: bks
        }
    });
}

handleBookKeyWordDropDown (key_wor)  {
    let keys;
    if (key_wor !== null) {
        keys = key_wor;
    } else {
        keys = []
    };
    this.setState({
        currentBook:{...this.state.currentBook, 
            key_words: keys
        }
    });
}

Here, I am using to Spread operator to use previous currentBook object and overriding only changed select value

Answer 2

The problem is that you are overriding the state values of other dropdown. You have to keep other state value in current state.

First declare your state like this:

this.state = {currentBook:{bbk:[],key_words:[]}}

Then do this:

 // handleBookKeyWordDropDown

    this.setState({currentBook:{
    ...this.state.currentBook,
                key_words: keys
        }
});

    // handleBookBBKDropDown
    this.setState({currentBook:{
    ...this.state.currentBook
                bbk: bks
        }
    });