Custom JSX content for options labels and selected values

[arxoft]

Hi,

Is it possible to use JSX content for select options labels (which appear in the dropdown) and the selected values (which appear as pills)?

For example; I have a searchable select dropdown showing available products. But against each entry in the dropdown I also want to show the category of the product along with it, a little faded. So would it be possible to use options labels as JSX? Like:

options = [
  {value: 323, label: <span>iPhone X <small>Mobiles</small></span>},
  {value: 341, label: <span>MacBook Air <small>Laptops</small></span>}
]

[ebonow]

Greetings @arxoft ,

Yes, you can.

I'd also like to add that you can also use formatOptionLabel to render JSX in the output instead of passing in JSX in your options data. This provides the benefit of having more control of how it is rendered (menu option vs selected value option) as well as better separation of mapping data vs rendering logic.

const options = [
  { value: 323, item: "iPhone X", category: "Mobiles" },
  { value: 341, item: "MacBook Air", category: "Laptops" }
];

const formatOptionLabel = (opt, { context }) => {
  return (
    <span>
      {opt.item}&nbsp;
      <small>{opt.category}</small>
    </span>
  );
};

return <Select options={options} formatOptionLabel={formatOptionLabel} />

Heres a codesandbox demonstrating both examples

Hope this answers your question.

[arxoft]

That worked. Thanks a lot _/)