You can create either a custom optionRenderer or optionComponent for react-select.

I'd recommend you optionRenderer as it is more simple, if you only want to put convert to html. You can see an example here:

There is another example for optionComponent here (just in case you want extra functionality):


You can rely on the optionComponent prop of react-select and the dangerouslySetInnerHTML feature of React And give to optionComponent a component like this

const MyOptionComponent = props => <span dangerouslySetInnerHTML={{__html : props.option}} />;


As simple as:

{ value: 'foo', label: <span dangerouslySetInnerHTML={{ __html: 'bar &amp; foo' }} /> }

No option component, no option renderer, just simple jsx.


I implemented the above solution and it broke the searchable feature. The label expects a string, not an element. -- There is actually a prop/function to do this

formatOptionLabel={function(data) {
  return (
    <span dangerouslySetInnerHTML={{ __html: data.label }} />

Check out this post: React-Select: How to maintain search-ability while passing HTML to the label value in options

Related Query

More Query from same tag