title: How do I display the content of React Quill without the html markup?
body: <p>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.</p>
  
  <p>I'm able to display the text but it still has all the html tags which of course I don't want.</p>
  
  <p>So this is my Quill setup so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export default class AddSpark extends Component {
    constructor(props) {
      super(props);
  
      this.onChange = this.onChange.bind(this);
  
      this.state ={
        content: '',
      };
    }
  
    onChange(html) {
      this.setState ({ content: html });
        console.log(html)
      }
  
    render() {
      return (
        &lt;div&gt;
        &lt;Col xs={12} md={6}&gt;
          &lt;form ref={(input) =&gt; this.sparkForm = input} onSubmit={(e) =&gt; this.createSpark(e)}&gt;
  
              &lt;ControlLabel&gt;Select your city&lt;/ControlLabel&gt;
              &lt;select id="formControlsCity" placeholder="Choose your city" onChange={this.onChange} className="form-control" onClick={ moreOptions } ref={(input) =&gt; this.city = input}&gt;
                &lt;option value="select"&gt;Choose your city&lt;/option&gt;
                &lt;option value="Beijing"&gt;Beijing&lt;/option&gt;
                &lt;option value="Shanghai"&gt;Shanghai&lt;/option&gt;
                &lt;option value="Chengdu &amp; Chongqing"&gt;Chengdu &amp; Chongqing&lt;/option&gt;
              &lt;/select&gt;
         
              &lt;ControlLabel&gt;Select your person&lt;/ControlLabel&gt;
              &lt;select id="formControlsPerson" placeholder="Choose your person" className="form-control" ref={(input) =&gt; this.person = input}&gt;
                &lt;option value="select"&gt;First select your city&lt;/option&gt;
              &lt;/select&gt;
      
  
              &lt;ControlLabel&gt;Select your location&lt;/ControlLabel&gt;
              &lt;select id="formControlsLocation" placeholder="Choose your location" className="form-control" ref={(input) =&gt; this.location = input}&gt;
                &lt;option value="select"&gt;First select your city&lt;/option&gt;
              &lt;/select&gt;
  
              &lt;ControlLabel&gt;Title&lt;/ControlLabel&gt;
              &lt;input type="text" label="Title" placeholder="Enter your title" className="form-control" ref={(input) =&gt; this.title = input}/&gt;
            
  
              &lt;ControlLabel&gt;Content&lt;/ControlLabel&gt;
                &lt;div className='_quill'&gt;
                  &lt;ReactQuill
                    ref='editor'
                    onChange={this.onChange}
                  /&gt;
                &lt;/div&gt;
                &lt;br /&gt;
  
            &lt;Button type="submit"&gt;Submit&lt;/Button&gt;
          &lt;/form&gt;
        &lt;/Col&gt;
        &lt;Col xs={12} md={6}&gt;
        &lt;h3&gt;Preview&lt;/h3&gt;
          {this.state.content}
        &lt;/Col&gt;
  
        &lt;/div&gt;
    )}
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>At the moment I get this: 
  <a href="https://i.stack.imgur.com/U7aGt.png" rel="noreferrer"><img src="https://i.stack.imgur.com/U7aGt.png" alt="enter image description here"></a></p>
  
  <p>Any help is highly appreciated!</p>