How to show icons in dropdown menu (option tag) in React instead of getting [object Object]?-CodePudding

i tried like this in my code to have a dropdown menu with these icons.!

<select name="orientation">
  <option value="all"><img src="https://img.icons8.com/material-outlined/24/000000/multiple-devices.png" /></option>
  <option value="landscape"><img src="https://img.icons8.com/material-outlined/24/000000/iphone--v2.png" /></option>
  <option value="portrait"><img src="https://img.icons8.com/material-outlined/24/000000/laptop.png" /></option>
  <option value="square"><img src="https://img.icons8.com/material-rounded/24/000000/name.png" /></option>
</select>

Instead i got like :

[object Object]
[object Object]
[object Object]
[object Object]

[pic of Output i got on webpage] [1]: https://i.stack.imgur.com/KRHj9.png

What can be done to show actual icons on menu??

CodePudding user response：

You can't add img tag in option tag because tags are stripped. you can use jquery like this example : https://codepen.io/antonandoff/pen/PmQvBz

and in react you can use react-select package like this : add image to react-select

CodePudding user response：

you might want to change select component to antd popover - https://ant.design/components/popover/ it is more suitable for what you're trying to do