Soy nuevo en React y estoy tratando de crear un menú desplegable con imágenes en las etiquetas y estoy usando una función para obtener los valores de un mapa y crear un id: par de etiquetas para mostrar como opciones en el menú desplegable. donde tanto la identificación como la etiqueta son de tipo cadena.
Estoy tratando de recuperar las opciones como esta:
const options = (): Select.Option[] => { return VALUES.map((color) => convertIdtoSelect(color)); };donde, VALUES es de tipo:
export const VALUES: ValueDef[] = [ { id: 'blue' name: 'Blue Color' }, { id: 'red' name: 'Red color' }, ];Aquí el método convertIdtoSelect se ve así:
export function convertIdtoSelect(color: ValueDef): Select.Option { return { id: color.id, label: `${color.name}` // Insert an image in this label that I have in a directory, before the name. }; }Por favor, hágame saber cómo hago esto. Lo intenté:
label: `<div><img src={/img/src/${color.id}.png} height="30px" width="30px"/> ${color.name} </div>`,que no funciona Por favor, hágame saber lo que estoy haciendo mal y gracias de antemano por cualquier ayuda y sugerencias.
Como es React, puedes pasar JSX directamente al objeto
export function convertIdtoSelect(color: ValueDef): Select.Option { return { id: color.id, label: <div><img src={`/img/src/${color.id}.png`} height="30px" width="30px">{color.name}</div> // Insert an image in this label that I have in a directory, before the name. }; } Y luego simplemente reprodúzcalo usando {item.label} (suponiendo item sea la variable devuelta por la función)