0
120
ViewsIcon next to text in react-select mutli label
I'm using react-select and want icons to show next to the text of each label which can be added and removed via multiSelect.
const data = [
{ label: <svg /> && 'keyword one', value: 'keyword one' },
];
Only shows either the svg or the text. Does anyone know a way around this?
·
Juan Pablo Isaza
2 answers
Answer question0
You're using && the wrong way. See short circuit evaluation for more detail. label can also accept a ReactNode, to fix the problem, define the option array as follow:
const options = [
{
value: "ocean",
label: (
<>
<YourIcon /> Ocean
</>
),
color: "#00B8D9",
isFixed: true
},
{
value: "blue",
label: (
<>
<YourIcon /> Blue
</>
),
color: "#0052CC"
},
{
value: "purple",
label: (
<>
<YourIcon /> Purple
</>
),
color: "#5243AA"
}
];
·
Juan Pablo Isaza
Report
Answer question