ReactSelect rendering custom component

Question

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:

Natan Sabbah · Accepted Answer · 2019-01-17 11:17:54Z

10

With react-select V2 you can achieve this by accessing the data prop that is passed to the custom component you pass to the components props of your <Select />

const Option = (props) => {
  const {
    ...
    data,
  } = props
  return (
    <div ...>
      {`${data.firstName} - ${data.lastName}`}
    </div>
  )
}

<Select
    ...
    components={{ Option }}
    ...
  />

answered Jan 17, 2019 at 11:17

Natan Sabbah

1011 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Michael Camden · Accepted Answer · 2016-07-14 19:48:12Z

4

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

answered Jul 14, 2016 at 19:48

Michael Camden

1,2189 silver badges9 bronze badges

3 Comments

ApathyBear Over a year ago

Thanks, quick question that is somewhat relevant: what is the best way to pass in more information to be rendered with each optionComponent. For example I have more information than just a label and a value. I would like to display meta data for each title (as per my image)

Michael Camden Over a year ago

The optionComponent is passed a prop of option which should be the data object. Here is the src for the rendered option, github.com/JedWatson/react-select/blob/master/src/…

CyberAbhay Over a year ago

How can we add icon for the selected option in v2

kheengz · Accepted Answer · 2019-10-23 16:37:55Z

From the upgrade of react-select V2 and above you can achieve this by accessing the prop that is passed to the custom component you pass to the components props of your <Select /> so you can still maintain the default behavior of the select component

from their documentation here https://react-select.com/styles#cx-and-custom-components

import React from 'react';
import { css } from 'emotion';
import Select from 'react-select';
import { colourOptions } from '../data';

const Option = (props: OptionProps) => {
  const {
    children,
    className,
    cx,
    getStyles,
    isDisabled,
    isFocused,
    isSelected,
    innerRef,
    innerProps,
  } = props;
  return (
    <div
      ref={innerRef}
      className={cx(
        css(getStyles('option', props)),
        {
          option: true,
          'option--is-disabled': isDisabled,
          'option--is-focused': isFocused,
          'option--is-selected': isSelected,
        },
        className
      )}
      {...innerProps}
    >
      {children}
    </div>
  );
};

export default () => (
  <Select
    closeMenuOnSelect={false}
    components={{ Option }}
    styles={{
      option: base => ({
        ...base,
        border: `1px dotted ${colourOptions[2].color}`,
        height: '100%',
      }),
    }}
    defaultValue={colourOptions[4]}
    options={colourOptions}
  />
);

Collectives™ on Stack Overflow

ReactSelect rendering custom component

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related