CODEWITHSUNDEEP
javascriptreactjsrichtextboxrich-text-editor
Miguel Angel Marroquin Jordan
Miguel Angel Marroquin Jordan

Reputation: 1589

Convert String to HTML on React , rich text editor

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?

Upvotes: 3

Views: 9959

Answers (3)

Akash Gupta
Akash Gupta

Reputation: 61

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

Upvotes: 6

tmhao2005
tmhao2005

Reputation: 17514

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

Upvotes: 0

see sharper
see sharper

Reputation: 12035

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

Upvotes: 0

Related Questions