Use different key for searching instead of value or label in react-select in reactJS

Question

I am using react-select as a searchable drop-down in my react app. I am referring this link https://github.com/JedWatson/react-select.

In the drop-down options structure, it needs label and value keys in the respective object in options. My problem is, I dont have any label or value in my options data. I am having different keys altogether. I want the drop-down to be searched by different key tab.

• My React version : 15.6.2
• react-select version : 1.0.0-rc.10

My code for drop-down:

<Select
   name="selectSubTag"
   id="selectSubTag"
   value={this.state.selectedFilter.subTag}
   options={this.state.jobSubTags}
   onChange={this.setSubTag}
   placeholder="Select Sub Tag"/>

Where my options data looks like below:

    this.state.jobSubTags = [
{tab:"tabName 1",tabValue:1},
{tab:"tabName 2",tabValue:2},
{tab:"tabName 3",tabValue:3},
]

and now I want the data to be searched by 'tab' key in the dropdown.

Answer 1

You can use getOptionLabel and getOptionValue :

 <Select
   name="selectSubTag"
   id="selectSubTag"
   value={this.state.selectedFilter.subTag}
   options={this.state.jobSubTags}
   getOptionLabel ={(option)=>option.tab}
   getOptionValue ={(option)=>option.tabValue}
   onChange={this.setSubTag}
   placeholder="Select Sub Tag"/>