0
162
ViewsUsando Select prop 'isSearchable' con JSX
Estoy tratando de hacer que mi react-select se pueda buscar, pero me he encontrado con un problema. Básicamente, la etiqueta de mis opciones debe estar en JSX ya que mi cliente quiere ver la información de contacto de un usuario de un vistazo. Sin embargo, creo que Select prop 'isSearchable' solo funciona cuando el valor es una cadena. Así es como se ve mi código:
Los datos que paso a la propiedad de 'opciones' de Seleccionar:
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 })); }; Luego paso mis contactos filtrados como los datos anteriores y configuro las options de React select en ese estado.
¡Cualquier sugerencia sobre lo que debo hacer sería muy apreciada!
1 answers
Answer question0
Select from react-select acepta una variedad de opciones donde cada opción es un objeto con una label y propiedades de value . Si desea utilizar la función de búsqueda, debe convertir al formato de opción que Select puede entender:
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} {...} /> 