I am new to React and I am trying to create a drop-down with images in the labels and I am using a function to get the values from a map and build an id: label pair to show as options in the drop-down. where both id and label are of string type.
I am trying to retrieve the options like this:
const options = (): Select.Option[] => {
return VALUES.map((color) => convertIdtoSelect(color));
};
where, VALUES is of type:
export const VALUES: ValueDef[] = [
{
id: 'blue'
name: 'Blue Color'
},
{
id: 'red'
name: 'Red color'
},
];
Here the method convertIdtoSelect looks like:
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.
};
}
Please let me know how do I do this. I tried:
label: `<div><img src={/img/src/${color.id}.png} height="30px" width="30px"/> ${color.name} </div>`,
which doesn't work. Please let me know what I am doing wrong and thanks in advance for any help and suggestions.
Since it's React you can pass JSX directly into the object
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.
};
}
And then just render it using {item.label} (assuming item is the variable returned from the function)