HiveBrain v1.2.0
Get Started
← Back to all entries
snippetjavascriptreactCritical

ReactJS convert HTML string to JSX

Submitted by: @import:stackoverflow-api··
0
Viewed 0 times
jsxhtmlstringreactjsconvert

Problem

I'm having trouble dealing with facebook's ReactJS. Whenever I do ajax and want to display an html data, ReactJS displays it as text. (See figure below)

The data is displayed through the success callback function of the jquery Ajax.

$.ajax({
   url: url here,
   dataType: "json",
   success: function(data) {
      this.setState({
           action: data.action
      })
   }.bind(this)
});


Is there any easy way to convert this into html? How should I do it using ReactJS?

Solution

By default, React escapes the HTML to prevent XSS (Cross-site scripting). If you really want to render HTML, you can use the dangerouslySetInnerHTML property:



React forces this intentionally-cumbersome syntax so that you don't accidentally render text as HTML and introduce XSS bugs.

Code Snippets

<td dangerouslySetInnerHTML={{__html: this.state.actions}} />

Context

Stack Overflow Q#19266197, score: 540

Revisions (0)

No revisions yet.