How to pass Unicode characters as function parameters in React

Question

I am trying to achieve something similar to this question How do I include a font awesome icon in my svg?

but I have 10 icons which has similar structure but only icon differs I have return a function to generate the Unicode character as

static renderIcon (status) {
    if (status === 'RED') {
      return '&#xf126;'
    } else if (status === 'GREEN') {
      return '&#xf121;'
    } else if (status === YELLOW') {
      return '&#xf11d;'
    }
  }

static renderTextWithIcon = (obj) => {
    return (
        <text x={params.cx} y={params.cy}
         className={ css.color}
         >
          {Utils.renderStatusIconContent(obj.status)}
        </text>
        )
  }

But it renders the strings as '' if I try to give without quotes it accepts and shows the icon,but I have to repeat the same code for each color. How can I write a function which take the Unicode characters as parameters?

score 1 · Accepted Answer · answered May 25 '17 at 05:48

If I get you right, you need to use dangerouslySetInnerHTML so that your unicode characters will not be escaped.

<text x={params.cx} y={params.cy}
  className={ css.color}
  dangerouslySetInnerHTML={{__html: Utils.renderStatusIconContent(obj.status) }}
/>

score 0 · Answer 2 · answered May 26 '17 at 04:27

@AlexM Thanks for the solution but i solved this situation in a little different way I have done this as

 static iconObj = {
    Right: '\uf126',
    Wrong: '\uf121',
  };

and i was rendering it as

<text x={params.cx} y={yParam}
         dy=".25em"
         onClick={onClick}>
          {iconObj[color]}
        </text>

This solved my problem for now.

How to pass Unicode characters as function parameters in React

2 Answers2