ffxsam ffxsam - 1 month ago 19
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
MyComponent
's render method, when I print out
this.props.text
, 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

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.