Reactselect: Pass In Extra Data To Be Used By Custom Render

I am using React-Select. Currently I am fetching data from elasticsearch and setting it to state: var new_titles = [] body.hits.hits.forEach(function(obj){ // looping through elas

Solution 1:

Well if I am looking at the code correctly it looks like you can pass in an optionRenderer prop along with your optionComponent.

https://github.com/JedWatson/react-select/blob/master/src/Select.js#L874

It takes your option as an argument so hypothetically you can pass additional fields in your option object and render via the optionRenderer function. Maybe something like this...

// ...optionRenderer(option) {
    return (
        <div>
            {option.value} - {option.label} - {option.someOtherValue}
        </div>
    )
}
// ...render() {
    let selectProps = {
        optionComponent: DropdownOptions,
        optionRenderer: this.optionRenderer,
        options: this.state.titleResults,
        simpleValue: true,
        clearable: this.state.clearable,
        name: 'selected-state',
        value: this.state.selectedTitleValue,
        onChange: this.handleTitleChosen,
        searchable: this.state.searchable,
        autofocus: true
    }
    return<Select {...selectProps} />
}