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:

const msg = "Some <strong>text</strong> here"

I want to show like this on page Some text here

If I use dangerousHtml then it's showing like this without bold "Some text here"

Can anyone please help?

Thanks in advance!

Please edit your question to include the code you've written. — Jordan Running, Jun 04 '18 at 15:08
Hi Luke it's just an example. I meant if I use dangerousHTML then HTML tags are not showing on the page but the bold effect is not coming also. — Bryce77, Jun 04 '18 at 15:12
Possible duplicate of [Rendering raw html with reactjs](https://stackoverflow.com/questions/27934238/rendering-raw-html-with-reactjs) — Jon Schneider, Nov 19 '19 at 16:41

Hitesh Chaudhari · Answer 1 · 2018-06-04T15:20:42.823

7

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

edited Jun 04 '18 at 15:20

answered Jun 04 '18 at 15:19

Hitesh Chaudhari

705
1
7
12

2

Or without a function:
text here" }} />
– Daniel Stoyanoff Jun 04 '18 at 15:19
Thanks for the reply hitesh and Daniel, I have used like you said but then its showing like this "Some text here". I need to bold the word "text" with tag – Bryce77 Jun 04 '18 at 15:23

score 0 · Answer 2 · answered Dec 22 '20 at 15:05

0

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

answered Dec 22 '20 at 15:05

Masudzzaman Ullash

9
3

React: Raw HTML tag in content

2 Answers2

Linked

Related