CODEWITHSUNDEEP
javascripthtmlreactjsquill
akorn3000
akorn3000

Reputation: 309

Using react-quill for a blog app so users can create posts. How do I properly display a string of html elements in React?

I'm creating a blog app in React and Rails and I started using react-quill for users to post articles. However, when a user submits their post, the output is a string of HTML elements.

For Example: <p>Line1</p><br /><p>Line2</p>

How might I go about parsing the HTML string so it can display properly?

Many thanks in advance!

Upvotes: 1

Views: 976

Answers (2)

Akib Mohtasim
Akib Mohtasim

Reputation: 21

Use html-react-parser.

import parse from 'html-react-parser';

and use it to display the text properly.

<div>
  {
    parse("<p>Line1</p><br /><p>Line2</p>")
  }
</div>

Upvotes: 0

Tholle
Tholle

Reputation: 112807

You can use dangerouslySetInnerHTML to render HTML from a string.

Example

function App() {
  return (
    <div
      dangerouslySetInnerHTML={{ __html: "<p>Line1</p><br /><p>Line2</p>" }}
    />
  );
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

Upvotes: 2

Related Questions