JSX Gotchas

The day was heading to an end. Mike and Shawn were still discussing about this shiny new thing—JSX. Mike decided that it was time to tell Shawn about the issues with using JSX.

"Shawn, so how do you feel about using JSX?"

"I liked it so far. It's very similar to the HTML markup. I can pass attributes, styles, and even classes. I can also use all the DOM elements" explained Shawn.

"Yes. But JSX is not HTML. We have to always remember this. Otherwise, we will run into trouble."

"For example, if you want to pass some custom attribute that does not exist in the HTML specification, then React will simply ignore it."

// custom-attribute won't be rendered
<table custom-attribute = 'super_awesome_table'>
</table>

"It must be passed as a data attribute so that React will render it."

// data-custom-attribute will be rendered
<table data-custom-attribute = 'super_awesome_table'>
</table>

"We may also run into some issues while rendering the HTML content dynamically. In the JSX tags, we can add a valid HTML entity directly."

// Using HTML entity inside JSX tags.
<p> Mike &amp; Shawn </p>
// will produce
 React.createElement("p", null, " Mike & Shawn ")

"But if we render it in a dynamic expression, it will then escape the ampersand."

// Using HTML entity inside dynamic expression
var first = 'Mike';
var second = 'Shawn';
<p> { first + '&amp;' + second } </p>

var first = 'Mike';
var second = 'Shawn';
React.createElement("p", null, " ", first + '&amp;' + second, " ")

"It happens as React escapes all the strings in order to prevent XSS attacks by default. To overcome it, we can directly pass the Unicode character of & or we can use arrays of strings and JSX elements." Mike explained.

// Using mixed arrays of JSX elements and normal variables
<p> {[first, <span>&amp;</span>, second]} </p>

React.createElement("p", null, " ", [first, 
                                   React.createElement("span", null, "&"), second], " ")

"Wow. It can get pretty messed up" expressed Shawn.

"Well, yes, but if we remember the rules, then it's pretty simple. Also, as a last resort, React also allows to render raw HTML using a special dangerouslySetInnerHTML prop."

// Rendering raw HTML directly
<p dangerouslySetInnerHTML={{__html: 'Mike &amp; Shawn'}} />

"Although this option should be used after consideration about what is getting rendered to prevent XSS attacks" Mike explained.