CODEWITHSUNDEEP
react-select
Fredy31
Fredy31

Reputation: 2817

How to use setValue in React-Select?

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?

Upvotes: 3

Views: 3172

Answers (1)

Fredy31
Fredy31

Reputation: 2817

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.

Upvotes: 7

Related Questions