0

I am making a call to an API, and the result has some HTML markup in it (example below). Is there a way I can use that markup when displaying the result, or am I better off just removing it? I am using React JS and rendering the result on to the webpage.

<p>Each night a park ranger will present an illustrated program highlighting a 
different aspect of Yellowstone’s wonders. Inquire at Fishing Bridge Visitor 
Information Center or look on local bulletin boards for the night's subject.</p> 
<p>Meet at the Bridge Bay Campground Amphitheater. <em>Dress warmly and bring a 
flashlight.</em> Accessible. 45 minutes.</p>
vol7ron
  • 40,809
  • 21
  • 119
  • 172
jazzy1331
  • 63
  • 9

2 Answers2

2

You can use below method, just pass html content and render returned value as usual. 

export const renderHTMLContent = (htmlContent) =>
  React.createElement('div', {
    dangerouslySetInnerHTML: { __html: htmlContent},
  });
Anil Kumar
  • 2,223
  • 2
  • 17
  • 22
0

Well if your HTML is Sanitized (You can used the sanitize-html package https://www.npmjs.com/package/sanitize-html, and will want to render the sanitized string using dangerouslySetInnerHTML https://reactjs.org/docs/dom-elements.html.

Steven Paulino
  • 1