Tengo la siguiente lista en reaccionar.
<select id="sponsor" name="sponsor" className="form-control" placeholder="Sponsor" } > <option value="" selected>Please select the sponsor</option> { active && result.map((sponsor:Sponsor,index:number)=> <option value={sponsor.id} >{sponsor.name}</option> ) } </select>esta funcionando perfectamente bien. ahora necesito cambiarlo a la lista de búsqueda. hice a continuación.
import VirtualizedSelect from 'react-virtualized-select' import "react-virtualized-select/styles.css"; import 'react-virtualized/styles.css' <VirtualizedSelect id="sponsor" name="sponsor" className="form-control" placeholder="Sponsor" options={ active && result.map((sponsor:Sponsor,index:number)=> {sponsor.name} )} > </VirtualizedSelect>ahora nada viene en la lista. Básicamente, mi requisito es hacer que la lista se pueda buscar e insertar datos de API en esa lista.
¿Podrías ayudarme con lo mismo? Cualquier otra opción también será de mucha ayuda.
Edit1:-Necesito una lista como la siguiente. primera línea "Por favor elija patrocinador"
de acuerdo con los documentos de VirtualizedSelect aquí https://www.npmjs.com/package/react-virtualized-select , el componente acepta una matriz de objetos como:
const options = [ { label: "One", value: 1 }, { label: "Two", value: 2 }, { label: "Three", value: 3, disabled: true } // And so on... ]no es una matriz de cadenas y creo que esta es la forma en que no funciona, sugeriría cambiar su código a:
<VirtualizedSelect id="sponsor" name="sponsor" className="form-control" placeholder="Sponsor" options={ active && result.map((sponsor:Sponsor,index:number)=> ({label: sponsor.name, value: sponsor.name}) )} > </VirtualizedSelect>