Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

How to include an image into a Select Option label, React?

$
0
0

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.


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>