312

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)

ReactJS render string

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)
});

enter image description here

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

1

12 Answers 12

534

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:

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

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

5
  • 6
    This syntax is shown on the homepage and in the tutorial, but I just realized it's not documented anywhere else so I just filed #413 to fix. Commented Oct 9, 2013 at 16:34
  • 1
    Correct! I've solved this already using dangerouslySetInnerHTML but thanks though :) Commented Oct 10, 2013 at 2:37
  • 4
    It's worth playing it safe to sanitize the content using the sanitize function from the dompurify npm package if you're getting that information from an external API. Commented Jan 27, 2020 at 8:10
  • 5
    Note that despite it being 'dangerous' if you are merely using it to render html from your server it's no more dangerous than displaying that content in a webpage. The danger arises if that content has user provided input that hasn't been sanitized and if it's direct from the server you should have already sanitized in back end. Commented May 30, 2021 at 23:41
  • You can try the easiest solution stackoverflow.com/questions/19266197/… Commented Oct 21, 2021 at 17:10
93

There are now safer methods to accomplish this. The docs have been updated with these methods.

Other Methods

  1. Easiest - Use Unicode, save the file as UTF-8 and set the charset to UTF-8.

    <div>{'First · Second'}</div>

  2. Safer - Use the Unicode number for the entity inside a Javascript string.

    <div>{'First \u00b7 Second'}</div>

or

`<div>{'First ' + String.fromCharCode(183) + ' Second'}</div>`
  1. Or a mixed array with strings and JSX elements.

    <div>{['First ', <span>&middot;</span>, ' Second']}</div>

  2. Last Resort - Insert raw HTML using dangerouslySetInnerHTML.

    <div dangerouslySetInnerHTML={{__html: 'First &middot; Second'}} />

4
  • 25
    I've ready the documentation but about a long HTML string such as one from a WYSIWYG editor? I can't see how we can use the 1st, 2nd or 3rd method
    – ericn
    Commented Aug 14, 2015 at 3:47
  • 6
    I agree with @eric. What good are methods 1-3 for already escaped content stored somewhere, e.g. a DB? Also note that method 4 – the only method – means you can't add child nodes.
    – dvdplm
    Commented Sep 23, 2015 at 19:20
  • 26
    Yup. These examples with hard-coded "dynamic" content don't make a lot of sense. Commented Oct 10, 2015 at 0:47
  • This is my innerHTML - "Displaying admins \u003cb\u003e1\u0026nbsp;-\u0026nbsp;10\u003c/b\u003e of \u003cb\u003e13\u003c/b\u003e in total" while this is what is being rendered - "Displaying admins <b>1&nbsp;-&nbsp;10</b> of <b>13</b> in total". When I try to use dangerouslySetInnerHTML, evrything breaks. Commented Mar 21, 2016 at 11:36
69

I recommend using Interweave created by milesj. Its a phenomenal library that makes use of a number if ingenious techniques to parse and safely insert HTML into the DOM.

Interweave is a react library to safely render HTML, filter attributes, autowrap text with matchers, render emoji characters, and much more.

  • Interweave is a robust React library that can:
    • Safely render HTML without using dangerouslySetInnerHTML.
    • Safely strip HTML tags.
    • Automatic XSS and injection protection.
    • Clean HTML attributes using filters.
    • Interpolate components using matchers.
    • Autolink URLs, IPs, emails, and hashtags.
    • Render Emoji and emoticon characters.
    • And much more!

Usage Example:

import React from 'react';
import { Markup } from 'interweave';

const articleContent = "<p><b>Lorem ipsum dolor laboriosam.</b> </p><p>Facere debitis impedit doloremque eveniet eligendi reiciendis <u>ratione obcaecati repellendus</u> culpa? Blanditiis enim cum tenetur non rem, atque, earum quis, reprehenderit accusantium iure quas beatae.</p><p>Lorem ipsum dolor sit amet <a href='#testLink'>this is a link, click me</a> Sunt ducimus corrupti? Eveniet velit numquam deleniti, delectus  <ol><li>reiciendis ratione obcaecati</li><li>repellendus culpa? Blanditiis enim</li><li>cum tenetur non rem, atque, earum quis,</li></ol>reprehenderit accusantium iure quas beatae.</p>"

<Markup content={articleContent} /> // this will take the articleContent string and convert it to HTML markup. See: https://milesj.gitbook.io/interweave


//to install package using npm, execute the command
npm install interweave
8
  • 1
    Could you provide a usage example please?
    – El Anonimo
    Commented Aug 6, 2018 at 10:18
  • 2
    @ElAnonimo I have added a usage example. Hope that makes things a bit more clearer. Commented Sep 16, 2018 at 7:26
  • 2
    Thanks a million, interweave is exactly what I needed. Cheers. Commented Feb 26, 2019 at 22:48
  • 3
    The documentation for this is not helpful. Also I tried out with few lines of html and I had a page full of error messages. Do someone have examples or any resources with documentation? Commented Jul 31, 2019 at 14:49
  • 1
    Do you know what threats Interweave does NOT cover?
    – Christophe
    Commented Oct 9, 2020 at 7:48
32
npm i html-react-parser;

import Parser from 'html-react-parser';

<td>{Parser(this.state.archyves)}</td>
1
  • The latest version of this library provides a very clean way of injecting html. And the replace method is a great way to replace (for example) img tags with your own <Image/> components.
    – Micros
    Commented Dec 16, 2020 at 12:54
14

For those still experimenting, npm install react-html-parser

When I installed it it had 123628 weekly downloads.

import ReactHtmlParser from 'react-html-parser'

<div>{ReactHtmlParser(htmlString)}</div>
1
  • FYI this library isn't maintained, as per the recent activity history
    – Shaggy
    Commented Nov 27, 2023 at 4:45
13

You can use the following if you want to render raw html in React

<div dangerouslySetInnerHTML={{__html: `html-raw-goes-here`}} />

Example - Render

Test is a good day

8

This could have been solved by using the content put inside this block {[]} like this. Example could be referred below for better clarity.

{[
   'abc',
   <b>my bold</b>, 
   'some other text'
]} 

This would preserve the formatting for text under tags while the others would be printed as plain text.

6

i found this js fiddle. this works like this

function unescapeHTML(html) {
    var escapeEl = document.createElement('textarea');
    escapeEl.innerHTML = html;
    return escapeEl.textContent;
}

<textarea className="form-control redactor"
                          rows="5" cols="9"
                          defaultValue={unescapeHTML(this.props.destination.description)}
                          name='description'></textarea>

jsfiddle link

3
  • Unfortunately document doesn't work on server rendering. Commented Sep 17, 2016 at 13:15
  • It might if you do import JSDOM from 'jsdom'; global.window = new JSDOM('', { url: 'http://localhost' }); global.document = global.window.document; idk goodluck
    – Coty Embry
    Commented Apr 12, 2019 at 14:48
  • And where is the JSX? Commented Oct 25, 2020 at 6:56
6

i start using npm package called react-html-parser

4

You can also use Parser() from html-react-parser. I have used the same. Link shared.

4

One option that's missing in the existing answers is using <React.Fragment> (available in React v16 and later). I find this best because this allows you to store any html element as a JSX variable and refer to it later. Also because using dangerouslySetInnerHTML is not secure.

For Example

const App = () => {
    const Windows = <React.Fragment>Microsoft <abbr title="Operating System">OS</abbr></React.Fragment>

    return (
      <ul>
        <li>{Windows}</li>
      </ul>
    );
};

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Other alternatives and considerations:

  1. If you're fetching the HTML from external sources, then you cannot use this approach because the fetched HTML will be in a string format. In that case you need to parse the HTML using a HTML Parser like html-react-parser
  2. If you don't have any keys or attributes, you can also use <></> which is a shorthand for <React.Fragment></React.Fragment>
  3. Keep in mind that dangerouslySetInnerHTML is dangerous to use because malicious client side code can be injected via script tags:
  4. @Brett has also suggested other alternatives:
  5. Note: using quotes in a JSX Variale
    • You should not surround a JSX variable with quotes (like a regular variable) - you should surround it with <React.Fragment> </ React.Fragment>
    • you should not escape quotes in a html tag of a JSX variable - for example the title in <abbr /> tag above has quotes which are not escaped.
12
  • 1
    const samplehtml = "<h1>Microsoft <abbr title=\"Operating System\">OS</abbr></h1>" const Windows = <React.Fragment>{samplehtml}</React.Fragment> This is not working Commented Dec 20, 2021 at 9:26
  • even samplehtml is a JSX variable, so you need to enclose that with <React.Fragment> as well - like this: const samplehtml = <React.Fragment><h1>Microsoft <abbr title="Operating System">OS</abbr></h1></React.Fragment>
    – Gangula
    Commented Dec 20, 2021 at 10:03
  • I made suggested changes but still html is rendered as string Commented Dec 20, 2021 at 10:07
  • you probably have a syntax error. You should not surround a JSX variable with quotes and you should not escape quotes in your<abbr /> tag as well. Copy the samplehtml variable from above comment.
    – Gangula
    Commented Dec 20, 2021 at 10:30
  • samplehtml is html coming from database so it is surrounded by quotes I want convert htmlstring coming from database to jsx Commented Dec 20, 2021 at 12:05
0

If you know ahead what tags are in the string you want to render; this could be for example if only certain tags are allowed in the moment of the creation of the string; a possible way to address this is use the Trans utility:

import { Trans } from 'react-i18next'
import React, { FunctionComponent } from "react";

export type MyComponentProps = {
    htmlString: string
}

export const MyComponent: FunctionComponent<MyComponentProps> = ({
  htmlString
}) => {
  return (
    <div>
      <Trans
        components={{
          b: <b />,
          p: <p />
        }}
      >
        {htmlString}
      </Trans>
    </div>
  )
}

then you can use it as always

<MyComponent
    htmlString={'<p>Hello <b>World</b></p>'}
/>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.