Search code examples
reactjsdropdownreact-selectsearchable

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

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.

Solution

  • By default the react-select searches over value and label, but if you added additional keys it will also include them in the search, so just iterate over the array and append value label keys equal to the tab key or the tabValue key and it will search upon them all, but remember that for display, the react-select displays the label key content