React-Select - Replacing Components for custom option content

Question

Using React-Select (version 2) I would like to have custom designed (select) options.

The documentation suggests that Replacing Components would be a method that I could

Answer 1

You can replace any component by including your override in the components property.

Something like:

const MyOption = props => {
  const { innerProps, innerRef } = props;
  return (
    

      
{props.data.artist}
      
{props.data.title} 
    
  );
};

The innerRef and innerProps properties are very important, as they carry forward things like the hover and onClick needed by the Option. The data in props is where your option data is.