ReactJS: how to output variable containing HTML?

Question

I'm ReactJS noob, so I am having this terrible problem: got variable named adminLink containing the following:

<span class="link" onclick="showLogin">Login</span>

I need to print it out, as HTML. If I do following

<div className="adminLink">
    {adminLink}
</div>

I get the text, not

Christopher Chiche · Accepted Answer · 2014-12-09 17:15:57Z

7

You can also use dangerouslySetInnerHtml:

<div className="adminLink" dangerouslySetInnerHTML={{__html: adminLink}}>
    {adminLink}
</div>

It is well explained on the JSX wiki page about HTML entities why this is dangerous and what other choices you have.

answered Dec 9, 2014 at 17:15

Christopher Chiche

15.4k10 gold badges65 silver badges100 bronze badges

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

Comments

Max Bumaye · Accepted Answer · 2014-12-08 14:20:58Z

5

Hello you would simply need to do this:

myComp = React.createClass({
  render:function(){
    adminLink = [];

    adminLink.push(<span className="link" onclick="showLogin">Login</span>);

    render (<div className="adminLink">
              {adminLink}
            </div> )
  }
});

Try it. hope it helped.

EDIT:

please notice the "class" needs to be changed to className. Also: using an array is not neccessary, I just like to do it in case I have to attach other JSX later on

answered Dec 8, 2014 at 14:20

Max Bumaye

1,00710 silver badges18 bronze badges

3 Comments

Brigand Over a year ago

also onclick needs to be onClick, and you need to pass a function to it (a string is not a function)

magnudae Over a year ago

Also you dont need to push it to an array. You could also just add it to a variable like this var adminLink = (<span className="link" onclick="showLogin">Login</span>);

Max Bumaye Over a year ago

@magnudae just as I mentioned in my EDIT :) Its just my style of adding JSX and optionally pushing more in some later point

Collectives™ on Stack Overflow

ReactJS: how to output variable containing HTML?

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related