0

basically I have a simple SELECT input in my react app, where I want the options to contain both the text of some kind and a little image. I was wondering if that's possible. I'm fetching an external API that contains the names and images of some grandmaster chess players that I have to display in a selector input with options corresponding to the name and images of those players.

This is my selector code so far :

     <select defaultValue={"Default"} onFocus={onFocus} onBlur={onBlur} style={style}>
        <option value="Default" disabled hidden>Choose your character</option>
            {state.map((data, key)=>{
              return (
                <option key={key}>{data.name}</option>
              )
            })}
          </select>

"state" is the state which holds the array of objects that I get from the API. This is the output I get from this code :

enter image description here

And I just want to display images next to the player names, I'd appreciate the help!

ceaiius
  • 103
  • 1
  • 7
  • Does this answer your question? [How to add images in select list?](https://stackoverflow.com/questions/2965971/how-to-add-images-in-select-list) – DecPK Jul 02 '22 at 16:22
  • Is the text also fetched from the API or are you having to explicitly write that yourself in the frontend? – AttemptedMastery Jul 02 '22 at 16:41
  • no I'm getting the text from the API as well, but the image has a weird url that I cannot figure out how to display. its like this : { name : "magnus carlsen", image : "/images/magnus.jpg"}. havent seen an url without an actual link in it so I'm confused how to use it as well. – ceaiius Jul 03 '22 at 05:36

0 Answers0