How do I display the content of React Quill without the html markup?

javascript reactjs quill
Deelux picture Deelux · Dec 3, 2016 · Viewed 15.5k times · Source

I managed to get my Quill working, but now I wanted to make a nice splitscreen as we have on this forum but one thing I haven't been able to figure out is how to convert the input of Quill to nice text on the preview side.

I'm able to display the text but it still has all the html tags which of course I don't want.

So this is my Quill setup so far:

At the moment I get this: enter image description here

Any help is highly appreciated!

Answer

Deelux picture Deelux · Dec 4, 2016

After doing some research I was able to find the answer:

To display the content of Quill in the preview section without the html tags I used this code: 

      <div dangerouslySetInnerHTML={{__html: this.state.content}}></div>

Related questions

Loop inside React JSX

I'm trying to do something like the following in React JSX (where ObjectRow is a separate component): <tbody> for (var i=0; i < numrows; i++) { <ObjectRow/> } </tbody> I realize and understand why this isn't …

Read More
"SyntaxError: Unexpected token < in JSON at position 0"

In a React app component which handles Facebook-like content feeds, I am running into an error: Feed.js:94 undefined "parsererror" "SyntaxError: Unexpected token < in JSON at position 0 I ran into a similar error which turned out to be a …

Read More
Show or hide element in React

I am messing around with React.js for the first time and cannot find a way to show or hide something on a page via click event. I am not loading any other library to the page, so I am …

Read More