Reactjs convert html string to jsx

Question

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

User · Answer

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

Other Methods

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

<div>{'First · Second'}</div>
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>
Or a mixed array with strings and JSX elements.

<div>{['First ', <span>·</span>, ' Second']}</div>
Last Resort - Insert raw HTML using dangerouslySetInnerHTML.

<div dangerouslySetInnerHTML={{__html: 'First · Second'}} />

User · Answer

This could have been solved by using the content put inside this block      like this  Example could be referred below for better clarity         abc       lt b gt my bold lt  b gt        some other text       This would preserve the formatting for text under tags while the others would be printed as plain text

User · Answer

You can use the following if you want to render raw html in React   lt div dangerouslySetInnerHTML     html   html-raw-goes-here      gt    Example - Render      Test is a good day

User · Answer

i start using npm package called react-html-parser

User · Answer

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    lt td dangerouslySetInnerHTML     html  this state actions     gt    React forces this intentionally-cumbersome syntax so that you don t accidentally render text as HTML and introduce XSS bugs

User · Answer

i found this js fiddle  this works like this  function unescapeHTML html        var escapeEl   document createElement  textarea        escapeEl innerHTML   html      return escapeEl textContent      lt textarea className  form-control redactor                            rows  5  cols  9                            defaultValue  unescapeHTML this props destination description                             name  description  gt  lt  textarea gt    jsfiddle link

User · Answer

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

User · Answer

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  quot react quot    export type MyComponentProps         htmlString  string    export const MyComponent  FunctionComponent lt MyComponentProps gt         htmlString      gt      return        lt div gt         lt Trans         components              b   lt b   gt             p   lt p   gt                    gt           htmlString         lt  Trans gt       lt  div gt         then you can use it as always  lt MyComponent     htmlString    lt p gt Hello  lt b gt World lt  b gt  lt  p gt      gt

User · Answer

npm i html-react-parser   import Parser from  html-react-parser     lt td gt  Parser this state archyves   lt  td gt

User · Answer

For those still experimenting  npm install react-html-parser  When I installed it it had 123628 weekly downloads   import ReactHtmlParser from  react-html-parser    lt div gt  ReactHtmlParser htmlString   lt  div gt

User · Answer

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     lt p gt  lt b gt Lorem ipsum dolor laboriosam  lt  b gt   lt  p gt  lt p gt Facere debitis impedit doloremque eveniet eligendi reiciendis  lt u gt ratione obcaecati repellendus lt  u gt  culpa  Blanditiis enim cum tenetur non rem  atque  earum quis  reprehenderit accusantium iure quas beatae  lt  p gt  lt p gt Lorem ipsum dolor sit amet  lt a href   testLink  gt this is a link  click me lt  a gt  Sunt ducimus corrupti  Eveniet velit numquam deleniti  delectus   lt ol gt  lt li gt reiciendis ratione obcaecati lt  li gt  lt li gt repellendus culpa  Blanditiis enim lt  li gt  lt li gt cum tenetur non rem  atque  earum quis  lt  li gt  lt  ol gt reprehenderit accusantium iure quas beatae  lt  p gt     lt Markup content  articleContent    gt     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

[javascript] Reactjs convert html string to jsx

Examples related to javascript

Examples related to jquery

Examples related to ajax

Examples related to reactjs