0
152
ViewsUsing Select prop 'isSearchable' with JSX
I am trying to make my react-select searchable but I have run into a problem. Basically, the label for my options needs to be in JSX since my client wants to see the contact information of a user at a glance. However, I think the Select prop 'isSearchable' only works when the value is a string. This is what my code looks like:
The data I pass into the 'options' prop of Select:
const createContactDisplay = (data) => {
return data.map((contact) => ({
label: (
<Contact>
<p>{contact.value.firstName}</p>
<p>{contact.value.lastName}</p>
<p>{contact.value.email}</p>
</Contact>
),
value: contact.key
}));
};
I then pass in my filtered contacts as the data above and set the options prop of React select to that state.
Any suggestions on what I should do would be much appreciated!
1 answers
Answer question0
The Select from react-select accepts an array of options where each option is an object with a label and value properties. If you want to use the search function, you need to convert to the option format that Select can understand:
const options = originalOptions.map((o) => ({
label: o.contact.value.firstName,
value: o.contact.value.firstName,
data: o.contact.value, // to reference custom data field if needed
}));
<Select options={options} {...} />
