How to use setValue in React-Select?

user_954867 0
Viewed 870

There is not much in the doc about how to use the setValue function in react select.

Here is my issue. In my multiselect, I have elements that if selected, invalidate other elements. Or when 2 particular elements are selected, well a third is mandatory to be selected.

So I do an if. I have a ref on it so it looks like this:

if(selectInputRef.current){
    if(selectInputRef.current.select.hasValue('optionA')){
        selectInputRef.current.select.clearValue();
        //selectInputRef.current.select.setValue('optionB','deselect-option');
    }
    if(selectInputRef.current.select.hasValue('optionA') && selectInputRef.current.select.hasValue('optionC')){
        //selectInputRef.current.select.setValue('optionD','select-option');
    }
}

So all elements uncommented in this work. I can check if the value is selected, I can completely clear the select if it is.

But now I need to change elements in particular. And this doesn't work. And the doc is not really useful on this.

enter image description here

So how am I supposed to write it to make this line work?

react-select
1 Answers

OK so small corrections.

The hasValue('optionA') line will only tell you if the value exists. Not if its checked.

You need to do a getValue() to get all checked options, and then search through it.

Also, setValue sets the full value of the select. No needs for the Clear. And it needs the full array of data. So setValue([{value: 'optionA', label:'Option A'}]); will check the option and uncheck everything else.

user_9548670
Related