title: Escape html in react
body: <p>I'm using react-quill and I have the data saving, however, I'm running into a few issues.</p>
  
  <ol>
  <li>How do I go about rendering out the contents after the save? Currently, I'm just getting the HTML back</li>
  </ol>
  
  <p><img src="https://i.gyazo.com/f48f99775ed89f7144b9f8c9d6c8c579.png" alt=""></p>
  
  <ol start="2">
  <li>I'm getting the following on the edit page</li>
  </ol>
  
  <p><img src="https://i.gyazo.com/b1b4868e01854466cd5aa0cf3570fbed.png" alt=""></p>
  
  <p>Here is my component</p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from "react";
  import { withRouter } from "react-router-dom";
  import "react-quill/dist/quill.snow.css";
  import ReactQuill from "react-quill";
  import swal from "sweetalert";
  import axios from "axios";
  
  import AuthService from "../../Auth/AuthService";
  import withAuth from "../../Auth/withAuth";
  const Auth = new AuthService();
  
  class Edit extends Component {
    constructor(props) {
      super(props);
      this.state = {
        journal: {}
      };
    }
  
    componentDidMount() {
      const journalId = this.props.match.params.id;
      axios
        .get("/api/journals/" + journalId)
        .then(result =&gt; {
          this.setState({ journal: result.data });
        })
        .catch(error =&gt; {
          console.error(error);
        });
    }
  
    modules = {
      toolbar: [
        [{ header: [1, 2, false] }],
        ["bold", "italic", "underline", "strike", "blockquote"],
        [
          { list: "ordered" },
          { list: "bullet" },
          { indent: "-1" },
          { indent: "+1" }
        ],
        ["link", "image"],
        ["clean"]
      ]
    };
  
    formats = [
      "header",
      "bold",
      "italic",
      "underline",
      "strike",
      "blockquote",
      "list",
      "bullet",
      "indent",
      "link",
      "image"
    ];
  
    onChange = e =&gt; {
      const state = this.state.journal;
      state[e.target.name] = e.target.value;
      this.setState({ journal: state });
    };
  
    handleQuillChange = value =&gt; {
      this.setState({ content: value });
    };
  
    onSubmit = e =&gt; {
      e.preventDefault();
      const journalId = this.props.match.params.id;
      const { title, content } = this.state.journal;
  
      let config = {
        headers: { Authorization: "bearer " + Auth.getToken() }
      };
  
      let body = {
        title,
        content
      };
  
      axios
        .put("/api/journals/" + journalId, body, config)
        .then(result =&gt; {
          swal({
            title: "Success",
            text: `You have edited the journal ${title}`,
            icon: "success",
            button: "OK"
          });
          this.props.history.push("/journals/" + journalId);
        })
        .catch(error =&gt; {
          swal({
            title: "Error",
            text: `${error}`,
            icon: "error",
            button: "Try again"
          });
        });
    };
  
    render() {
      return (
        &lt;&gt;
          &lt;div className='block md:flex md:flex-column h-full'&gt;
            &lt;div className='p-12 w-full text-center text-gray-800'&gt;
              &lt;h1 className='title mb-10'&gt;Edit a journal&lt;/h1&gt;
  
              &lt;form className='w-full m-auto max-w-lg' onSubmit={this.onSubmit}&gt;
                &lt;div className='flex flex-wrap mb-4'&gt;
                  &lt;label htmlFor='title'&gt;Title:&lt;/label&gt;
                  &lt;input
                    type='text'
                    name='title'
                    defaultValue={this.state.journal.title}
                    onChange={this.onChange}
                    placeholder='Title'
                  /&gt;
                &lt;/div&gt;
  
                &lt;div className='flex flex-wrap'&gt;
                  &lt;label htmlFor='description'&gt;content:&lt;/label&gt;
                  &lt;ReactQuill
                    name='content'
                    className='h-64'
                    value={this.state.content}
                    onChange={this.handleQuillChange}
                    theme='snow'
                    modules={this.modules}
                    formats={this.formats}
                  /&gt;
                &lt;/div&gt;
  
                &lt;div className='flex'&gt;
                  &lt;button type='submit' className='btn w-full'&gt;
                    Submit
                  &lt;/button&gt;
                &lt;/div&gt;
              &lt;/form&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/&gt;
      );
    }
  }
  
  export default withAuth(withRouter(Edit));
  </code></pre>
  
  <p>So any help would be great on solving both issues.</p>