How can i display flags as option in a select

Question

I would like to make a dropdown which items are flags I tried a solution I found on stackoverflow but it doesn't work.

Here the sandbox link : https://codesandbox.io/embed/reverent-fermat-zssow

const CountrySelect = () => {

return (

<div className="country-select-ctn item">
     <select  name="country-select" id="country-select">
     {countries.map((option, index) =>
   <option style={{backgroundImage:`url(${option.src})`}}  key={index} value={index}> //Solution A => Empty field
     <img src={`${option.src}`} alt='foo' style={{backgroundImage:`url(${option.src})`}} />  //Solution B => [Object objet] 
   </option>
  )}
     </select>
</div>

); };

export default CountrySelect;

export let countries = [ { label:"France", src: require("./assets/flags/france.png"), link:" ", value:"FR" } ]

I want to know why am i getting [Object object]

Last week I was looking for some react-select examples and I found this https://codesandbox.io/s/2x16vkqkop Maybe it can help you — Drusto, Oct 15 '19 at 14:09

score 2 · Answer 1 · edited Oct 16 '19 at 09:23

2

You're not using require. Take a look on how to import images in react

export let countries = [
    {
      label:"France",
      src: require("./assets/flags/france.png"),
      link:" ",
      value:"FR"
    }
  ]

You could also render an image instead of backgroundImage

   <option key={index} value={index}>
        <img src={option.src} alt='foo' style={{/*...*/}} />
   </option

edited Oct 16 '19 at 09:23

ArBabacar_

111
1
3
11

answered Oct 15 '19 at 14:00

Dupocas

18,570
6
30
49

I tried both solutions With the first the field was empy and for the second one i go [Object object] displayed in the field – ArBabacar_ Oct 15 '19 at 14:20
Yes i tried to play with require switch the link but still – ArBabacar_ Oct 15 '19 at 15:10

score 2 · Answer 2 · answered Oct 15 '19 at 14:03

2

Should be just:

<option style={{backgroundImage:`url(${option.src})`}}  key {index} value={index}>

answered Oct 15 '19 at 14:03

Girgetto

982
7
17

Still not working i will try something else and let you know if that worked or not – ArBabacar_ Oct 16 '19 at 07:16

How can i display flags as option in a select

2 Answers2