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.