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 optionsComponent:

optionsComponent={DropdownOptions}

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) {

        event.preventDefault();

        event.stopPropagation();

        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}

                onMouseDown={this.handleMouseDown}

                onMouseEnter={this.handleMouseEnter}

                onMouseMove={this.handleMouseMove}

                title={this.props.option.title}>

                <span>Testing Text</span>

                {this.props.children}

            </div>

        );

    }

});

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: