Select filter options with JSX as their text


I’m using Mobiscroll 5.27.1 for React, and I’m trying to filter a Select. However the option text is JSX elements, rather than just plain text. This means the filtering does nothing. Below is how each option is rendered:


	text: (
		<div className='job-option'>
			<div>{job.number + ': ' +}</div>
	value: '123456'

What is the best way to filter the options when each option’s text is a JSX element like above?

Thank you,

The answer is to create a render function for the Select which handles the rendering of the divs. It was wrong to put the JSX directly as the text property of each option.

	text: job.number + ': ' +,
	value: '123456',
	number: job.number,