React: Raw HTML tag in content

Question

I am working on a React app. There is some dynamic content which contents HTML tags. When I am showing that content on the page, it\'s showing with raw HTML tag.

For say

Answer 1

You can use the 'dangerouslySetInnerHTML' like:

const msg = () => ({__html: 'Some <strong>text</strong> here'});

and use it in your code like:

<div dangerouslySetInnerHTML={createMarkup()} />

For reference for 'dangerouslySetInnerHTML' read this:

dangerouslySetInnerHTML

Answer 2

yarn add raw-html-react

or

npm install raw-html-react

import ReactHtml from 'raw-html-react';

const html = `<div data-react-component="MyComponent"></div>`;
return <ReactHtml html={html} componentMap={{ MyComponent }} />;