React-select: Stateless function components cannot be given refs. Attempts to access this ref will fail

[nWidart]

Hello,

I'm having an issue with react-select, when trying to use a custom Option component.

This is what my option component looks like:

import * as React from 'react';

const Option = (props) => {
  const handleMouseDown = (event) => {
    event.preventDefault();
    event.stopPropagation();
    props.onSelect(props.option, event);
  };
  const handleMouseEnter = (event) => {
    props.onFocus(props.option, event);
  };
  const handleMouseMove = (event) => {
    if (props.isFocused) return;
    props.onFocus(props.option, event);
  };

  return (
    <div className={props.className}
         onMouseDown={handleMouseDown}
         onMouseEnter={handleMouseEnter}
         onMouseMove={handleMouseMove}
         title={props.option.title}>
      <img src={props.option.thumbnail}/> {props.children}
    </div>
  );
};

export default Option;

And used on the Select element like optionComponent={Option}.

However, with this, I'm getting the following error:

index.js:2177 Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.

Check the render method of `Select`.
    in Option (created by Select)
    in div (created by Select)
    in div (created by Select)
    in div (created by Select)

Did I miss something?

Thanks

[nWidart]

Turns out the solution was to implement the OptionComponentProps for the props and convert to a react class.

class Option extends React.Component<OptionComponentProps> {

[alon-green]

Hi, I am having to same issue, can you please paste your full implementation?
thanks

[nWidart]

@alon-green The important part is the one I posted with the interface for the props. All the rest is as documented.

[alon-green]

What are the definition of the OptionComponentProps interface?

[nWidart]

They are defined in this package.

export interface OptionComponentProps<TValue = OptionValues> {
    /**
     * Classname(s) to apply to the option component.
     */
    className?: string;

    /**
     * Currently focused option.
     */
    focusOption?: Option<TValue>;

    inputValue?: string;
    instancePrefix?: string;

    /**
     * True if this option is disabled.
     */
    isDisabled?: boolean;

    /**
     * True if this option is focused.
     */
    isFocused?: boolean;

    /**
     * True if this option is selected.
     */
    isSelected?: boolean;

    /**
     * Callback to be invoked when this option is focused.
     */
    onFocus?: (option: Option<TValue>, event: any) => void;

    /**
     * Callback to be invoked when this option is selected.
     */
    onSelect?: (option: Option<TValue>, event: any) => void;

    /**
     * Option to be rendered by this component.
     */
    option: Option<TValue>;

    /**
     * Index of the option being rendered in the list
     */
    optionIndex?: number;

    /**
     * Callback to invoke when removing an option from a multi-selection. (Not necessarily the one
     * being rendered)
     */
    removeValue?: (value: TValue | TValue[]) => void;

    /**
     * Callback to invoke to select an option. (Not necessarily the one being rendered)
     */
    selectValue?: (value: TValue | TValue[]) => void;
}

[taven-liu]

this code work normal

export class Options extends React.PureComponent {
   ...
}