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?

pumbo · Accepted Answer · 2017-05-25 05:48:37Z

1

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) }}
/>

answered May 25, 2017 at 5:48

pumbo

3,9162 gold badges29 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Geeky · Accepted Answer · 2017-05-26 04:27:26Z

0

@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.

answered May 26, 2017 at 4:27

Geeky

7,5142 gold badges28 silver badges52 bronze badges

Collectives™ on Stack Overflow

How to pass Unicode characters as function parameters in React

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related