React-Select：defaultValue属性中的多个值

Question

Im trying to add multiple values inside my defaultValue attribute but without success.

<Select 
   value={this.state.selectedTests} 
   defaultValue={this.getDefaultValues(this.props.tests)} 
   isMulti onChange={(e) => this.handleChange(e)} 
   options={this.state.allTests} 
   className="basic-multi-select dropDownSelector"
 />

getDefaultValues() returns an array:

0:{value: "t1", label:"Test1"}
1:{value: "t2", label:"Test2"}

But the Select element shows no labels...

Anyone else faced the same issue or knows how to solve this?

Thank you for your help!

Answer 1

I solved my problem :) The values in the attribute "value" overwrote the values in the attribute "defaultValue". I delete the attribute "value" and it works now.

Changed code:

<Select 
   defaultValue={this.getDefaultValues(this.props.tests)} 
   isMulti onChange={(e) => this.handleChange(e)} 
   options={this.state.allTests} 
   className="basic-multi-select dropDownSelector"
 />

Answer 2

You should only provide the value in the defaultValue prop. The label is located in the options prop. It will match the correct value with the prop that you provided in the options prop. The method getDefaultValues() should return:

0: "t1",
1: "t2"