Select filter options with JSX as their text

Select pickers & dropdowns
1

Hello,

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 + ': ' + job.name}</div>
		</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,
Seb

2

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 + ': ' + job.name,
	value: '123456',
	number: job.number,
	name: job.name,
}