ffxsam ffxsam - 1 year ago 110
React JSX Question

React - How to pass HTML tags in props?

I want to be able to pass text with HTML tags, like so:

<MyComponent text="This is <strong>not</strong> working." />

But inside of
's render method, when I print out
, it literally prints out everything:

This is <strong>not</strong> working.

Is there some way to make React parse HTML and dump it out properly?

Answer Source

You can use mixed arrays with strings and JSX elements (see the docs here):

<MyComponent text={["This is ", <strong>not</strong>,  "working."]} />

There's a fiddle here that shows it working: http://jsfiddle.net/7s7dee6L/

Also, as a last resort, you always have the ability to insert raw HTML but be careful because that can open you up to a cross-site scripting (XSS) attack if aren't sanitizing the property values.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download