title: ReactSelect rendering custom component
body: <p>I am using ReactSelect in one of my forms:</p>
  
  <pre><code>&lt;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} /&gt;
  </code></pre>
  
  <p>I'd like to to render a custom <code>optionsComponent</code>:</p>
  
  <pre><code>optionsComponent={DropdownOptions}
  </code></pre>
  
  <p>By looking at the <a href="https://github.com/JedWatson/react-select/blob/master/examples/src/components/CustomComponents.js" rel="nofollow noreferrer">example</a>, you are able to render a custom component so I have tested that:</p>
  
  <pre><code>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 (
              &lt;div className={this.props.className}
                  onMouseDown={this.handleMouseDown}
                  onMouseEnter={this.handleMouseEnter}
                  onMouseMove={this.handleMouseMove}
                  title={this.props.option.title}&gt;
                  &lt;span&gt;Testing Text&lt;/span&gt;
                  {this.props.children}
              &lt;/div&gt;
          );
      }
  });
  </code></pre>
  
  <p>This should be rendering <code>&lt;span&gt;Testing Text&lt;/span&gt;</code> before every child. But it is not. What am I doing wrong?</p>
  
  <p>My end goal is to make my options display various data like this:
  <a href="https://i.stack.imgur.com/SOD0W.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SOD0W.png" alt="enter image description here"></a></p>