Convert String to HTML on React , rich text editor

Question

I am using React-Quill to add Rich text editor to my app.

have the next string store in my DB:

const text = '<p>Hello<strong> World</strong></p><p><strong>Next Line</strong></p>';

Now I want to "Render" the text const in a REACT component, but with the "Styuling" that HTML gives to it.

Hello World

Next Line

How can I do it? or other rich text editor to achieve that?

Possible duplicate of [this](https://stackoverflow.com/questions/39758136/render-html-string-as-real-html-in-a-react-component/55884366). Also, check [this](https://medium.com/@uigalaxy7/how-to-render-html-in-react-7f3c73f5cafc) — angelos_lex, Aug 05 '20 at 00:10

score 5 · Answer 1 · answered Oct 20 '20 at 16:08

5

You can use dangerouslySetInnerHTML

Source: https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

const text = '<p>Hello<strong> World</strong></p><p><strong>Next Line</strong></p>';

<div dangerouslySetInnerHTML={{__html:text}} />

answered Oct 20 '20 at 16:08

Akash Gupta

51
1
4

Thanks Mr. @Akash Gupta for your nice solution. It worked for me. – Musadul Islam Dec 29 '21 at 11:18

score 0 · Answer 2 · answered Aug 05 '20 at 00:06

0

react-quill supports HTML strings out of the box, so there's nothing to do except set the value property of the component with the string you receive from the database.

<ReactQuill value={text} ... />

answered Aug 05 '20 at 00:06

see sharper

11,505
8
46
65

score 0 · Answer 3 · answered Aug 05 '20 at 05:02

0

Yeah react-quill is the way for working with React. I also have had a small demo to demonstrate how it works (we might have to put some css files to make it looking good): https://codesandbox.io/s/hardcore-hill-mdxji?file=/src/App.js

answered Aug 05 '20 at 05:02

tmhao2005

14,776
2
37
44

Convert String to HTML on React , rich text editor

3 Answers3