title: How do I display the formatted content of React Quill ? I can get just the plain text but I want the text with applied CSS to display
body: <p>I managed to get the text from Quill editor, but I need to pass the text which is formatted with the editor to my other component, not just the plain text. Can anyone please help me? I tried the Quill API and different methods but I either get just the plain text or the HTML in my other component. All examples I have found is showing how to pass the content which is just the plain text and none nothing about the changed and formatted text.  </p>
  
  <pre><code> import React from "react";
      import { render } from "react-dom";
      import ReactQuill, { Quill } from "react-quill";
      import "react-quill/dist/quill.snow.css";
      import Display from './Display';
      import "../index.css"
  
  
  
      class Editor extends React.Component {
  
        constructor (props) {
          super(props)
  
          console.log(props);
          this.modules = {
                  toolbar: [
                    [{ 'font': [] }],
                    [{ 'size': ['small', false, 'large', 'huge'] }],
                    ['bold', 'italic', 'underline'],
                    [{'list': 'ordered'}, {'list': 'bullet'}],
                    [{ 'align': [] }],
                    [{ 'color': [] }, { 'background': [] }],
                    ['clean']
                  ]
              };
  
              this.formats = [
                  'font',
                  'size',
                  'bold', 'italic', 'underline',
                  'list', 'bullet',
                  'align',
                  'color', 'background'
            ];
  
          this.state = { editorHtml: '' ,
            content:'', comments:''
            } 
            this.rteChange = this.rteChange.bind(this);
            this.onChange = this.onChange.bind(this);
  
  
        }
  
        handleChange = (text) =&gt;{
  
          this.setState({editorHtml: text})
          this.props.onTextSubmit(text);
  
        }
          // onChange(content, delta, source, editor,comments) {
          //   const text = editor.getText(content);
          //   this.setState ({ content: text });
          //   console.log(text);
          //   console.log(editor.getContents())
          //   const con = editor.getContents();
          //   //const test = editor.setContents(delta);
          //   //this.setState({comments: con})
          //   // console.log(editor.getFormat());  
          // }
  
          onChange(html) {
            this.setState ({ content: html });
              console.log(html)
            }
  
          on= ('text-change', function(delta, oldDelta, source) {
            if (source == 'api') {
              console.log(delta);
            // } else if (source == 'user') {
            //   console.log("A user action triggered this change.");
            //}
          }});
  
        render () {
          return (
            &lt;div&gt;
  
              &lt;ReactQuill 
                ref='editor'
                theme="snow"  modules={this.modules}
                formats={this.formats} 
                test={this.test}
                onChangeSelection={this.onChangeSelection}
                onChange={this.onChange}
                //value={this.state.comments || ''}
                placeholder={this.props.placeholder}
                test2={this.test2}
  
               /&gt;
        {/* &lt;div  &gt;&lt;input type="text" name="name"  onChange={(e) =&gt; this.handleChange(e.target.value)}
                  value={this.state.editorHtml}/&gt;{this.state.comments} &lt;/div&gt; */}
  
                 &lt;div dangerouslySetInnerHTML={{__html: this.state.content}}&gt;&lt;/div&gt;
             &lt;/div&gt;
  
           )
        }
  
      }
  
  
      export default Editor;  
  </code></pre>