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