ApathyBear ApathyBear - 1 year ago 117
Javascript Question

ReactSelect rendering custom component

I am using ReactSelect in one of my forms:

<Select name='event-title' className="event-title" ref="stateSelect" autofocus optionsComponent={DropdownOptions} onInputChange={this.handleChangeTitle} options={this.state.titleResults} simpleValue clearable={this.state.clearable} name="selected-state" value={this.state.selectedTitleValue} onChange={this.handleTitleChosen} searchable={this.state.searchable} />

I'd like to to render a custom


By looking at the example, you are able to render a custom component so I have tested that:

const DropdownOptions = React.createClass({
propTypes: {
children: React.PropTypes.node,
className: React.PropTypes.string,
isDisabled: React.PropTypes.bool,
isFocused: React.PropTypes.bool,
isSelected: React.PropTypes.bool,
onFocus: React.PropTypes.func,
onSelect: React.PropTypes.func,
option: React.PropTypes.object.isRequired,
handleMouseDown (event) {
this.props.onSelect(this.props.option, event);
handleMouseEnter (event) {
this.props.onFocus(this.props.option, event);
handleMouseMove (event) {
if (this.props.isFocused) return;
this.props.onFocus(this.props.option, event);
render () {
return (
<div className={this.props.className}
<span>Testing Text</span>

This should be rendering
<span>Testing Text</span>
before every child. But it is not. What am I doing wrong?

My end goal is to make my options display various data like this:
enter image description here

Answer Source

The property is optionComponent not optionsComponent as you've written.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download