Render HTML string as real HTML in a React component

Question

Here s what I tried and how it goes wrong   This works    lt div dangerouslySetInnerHTML      html    lt h1 gt Hi there  lt  h1 gt        gt    This doesn t    lt div dangerouslySetInnerHTML      html  this props match description      gt      The description property is just a normal string of HTML content  However it s rendered as a string  not as HTML for some reason     Any suggestions

User · Answer

I use  react-html-parser  yarn add react-html-parser  import ReactHtmlParser from  react-html-parser      lt div gt    ReactHtmlParser  html string     lt  div gt    Source on npmjs com Lifting up  okram s comment for more visibility   from its github description  Converts HTML strings directly into React components avoiding the need to use dangerouslySetInnerHTML from npmjs com A utility for converting HTML strings into React components  Avoids the use of dangerouslySetInnerHTML and converts standard HTML elements  attributes and inline styles into their React equivalents

User · Answer

If you have control over where the string containing html is coming from  ie  somewhere in your app   you can benefit from the new  lt Fragment gt  API  doing something like   import React   Fragment  from  react   const stringsSomeWithHtml       testOne         lt Fragment gt        Some text  lt strong gt wrapped with strong lt  strong gt       lt  Fragment gt         testTwo   This is just a plain string  but it ll print fine too           render       return  lt div gt  stringsSomeWithHtml prop key   lt  div gt

User · Answer

You just use dangerouslySetInnerHTML method of React   lt div dangerouslySetInnerHTML      html  htmlString      gt   Or you can implement more with this easy way  Render the HTML raw in React app

User · Answer

i use https   www npmjs com package html-to-react  const HtmlToReactParser   require  html-to-react   Parser  let htmlInput   html template  let htmlToReactParser   new HtmlToReactParser    let reactElement   htmlToReactParser parse htmlInput    return  lt div gt  reactElement  lt  div gt

User · Answer

dangerouslySetInnerHTML  dangerouslySetInnerHTML is React   s replacement for using innerHTML in the browser DOM  In general  setting HTML from code is risky because it   s easy to inadvertently expose your users to a cross-site scripting  XSS  attack  So  you can set HTML directly from React  but you have to type out dangerouslySetInnerHTML and pass an object with a   html key  to remind yourself that it   s dangerous  For example   function createMarkup       return    html   First  amp middot  Second       function MyComponent       return  lt div dangerouslySetInnerHTML  createMarkup      gt

User · Answer

If you have HTML in a string  I would recommend using a package called html-react-parser  Install it  npm install html-react-parser or if you use yarn  yarn add html-react-parser Use it something like this import parse from  html-react-parser  const yourHtmlString     lt h1 gt Hello lt  h1 gt     lt div gt       parse yourHtmlString    lt  div gt   Reference  https   www npmjs com package html-react-parser

User · Answer

In my case  I used react-render-html  First install the package by npm i --save react-render-html  then   import renderHTML from  react-render-html    renderHTML   lt a class  github  href  https   github com  gt  lt b gt GitHub lt  b gt  lt  a gt

User · Answer

If you have control to the  this props match description  and if you are using JSX  I would recommend not to use  dangerouslySetInnerHTML        In JSX  you can define a html object rather than a string to contain raw HTML let description    lt h1 gt Hi there  lt  h1 gt       Here is how you print return        description

User · Answer

Check if the text you re trying to append to the node is not escaped like this   var prop         match            description    amp lt h1 amp gt Hi there  amp lt  h1 amp gt              Instead of this   var prop         match            description    lt h1 gt Hi there  lt  h1 gt              if is escaped you should convert it from your server-side     The node is text because is escaped    The node is a dom node because isn t escaped

User · Answer

I use innerHTML together a ref to span   import React    useRef  useEffect  useState   from  react    export default function Sample       const spanRef   useRef lt HTMLSpanElement gt  null     const  someHTML     useState  some  lt b gt bold lt  b gt        useEffect      gt        if  spanRef current          spanRef current innerHTML   someHTML              spanRef current  someHTML       return  lt div gt      my custom text follows lt br   gt       lt span ref  spanRef    gt     lt  div gt

User · Answer

You can also use parseReactHTMLComponent from Jumper Package  Just look at it  it s easy and you don t need to use JSX syntax  https   codesandbox io s jumper-module-react-simple-parser-3b8c9 file  src App js   More on Jumper  https   github com Grano22 jumper blob master components js NPM Package  https   www npmjs com package jumper react

User · Answer

Is this props match description a string or an object  If it s a string  it should be converted to HTML just fine  Example  class App extends React Component    constructor         super        this state           description    lt h1 style  quot color red  quot  gt something lt  h1 gt                  render         return          lt div dangerouslySetInnerHTML      html  this state description      gt                ReactDOM render  lt App   gt   document getElementById  root      Result  http   codepen io ilanus pen QKgoLA editors 1011 However if description is  lt h1 style  quot color red  quot  gt something lt  h1 gt  without the quotes     you re going to get   Object     typeof   object Symbol         owner  null    key  null    props  Object       children   quot something quot       style   quot color red  quot         ref  null    type   quot h1 quot     If It s a string and you don t see any HTML markup the only problem I see is wrong markup   UPDATE If you are dealing with HTML Entities  You need to decode them before sending them to dangerouslySetInnerHTML that s why it s called  quot dangerously quot     Working example  class App extends React Component      constructor         super        this state           description    amp lt p amp gt  amp lt strong amp gt Our Opportunity  amp lt  strong amp gt  amp lt  p amp gt                 htmlDecode input       var e   document createElement  div        e innerHTML   input      return e childNodes length     0    quot  quot    e childNodes 0  nodeValue         render         return          lt div dangerouslySetInnerHTML      html  this htmlDecode this state description       gt                ReactDOM render  lt App   gt   document getElementById  root

User · Answer

I could not get npm build to work with react-html-parser  However  in my case  I was able to successfully make use of https   reactjs org docs fragments html  I had a requirement to show few html unicode characters   but they should not be directly embedded in the JSX  Within the JSX  it had to be picked from the Component s state  Component code snippet is given below    constructor      this state           rankMap     5     lt Fragment gt  amp  9733   amp  9733   amp  9733   amp  9733   amp  9733  lt  Fragment gt                       4     lt Fragment gt  amp  9733   amp  9733   amp  9733   amp  9733   amp  9734  lt  Fragment gt                      3     lt Fragment gt  amp  9733   amp  9733   amp  9733   amp  9734   amp  9734  lt  Fragment gt                       2     lt Fragment gt  amp  9733   amp  9733   amp  9734   amp  9734   amp  9734  lt  Fragment gt                      1     lt Fragment gt  amp  9733   amp  9734   amp  9734   amp  9734   amp  9734  lt  Fragment gt                         render             return   lt div class  card-footer  gt                       lt small class  text-muted  gt   this state rankMap  5     lt  small gt                  lt  div gt

[javascript] Render HTML string as real HTML in a React component

Examples related to javascript

Examples related to html

Examples related to reactjs

Examples related to jsx