Stateless function components cannot be given refs. Attempts to access this ref will fail

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

[taven-liu]

this code work normal

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