javascripthtmlreactjsquill

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!

Solution

  • 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>