How can I use react-select to custom render subtext below each dropdown item?

Question

I\'m trying to figure out how I can utilize the custom components in react-select to render a dropdown that has items with subtext.

I\'ve looked at each one of the compo

Answer 1

React-select V2+ solution:

You are absolutely right, using Option component will allow you to format each option in the menuList like the follow example:

const options = [
  {
    label: "text 1",
    subLabel: "subtext 1",
    value: "1"
  },
  {
    label: "text 2",
    subLabel: "subtext 2",
    value: "2"
  },
  {
    label: "text 3",
    subLabel: "subtext 3",
    value: "3"
  },
  {
    label: "text 4",
    subLabel: "subtext 4",
    value: "4"
  }
];

const Option = props => {
  return (
    
      
{props.data.label}
      
{props.data.subLabel}
    
  );
};

function App() {
  return (
    

      
    
  );
}


Here a live example.

React-select V1 solution:

Keeping the same structure as the V2 solution, you can achieve to display a custom option element by passing a render function using the props optionRenderer like this:

class App extends Component {
  renderOption = option => (
    

      {option.label}
      
        {option.subLabel}
      
    
  );
  render() {
    return (
      

        
      

    );
  }
}

Here a live example.