React-Quill - ERROR You most probably want `editor.getContents()` instead

Question

When I save the form (onSubmit) I get this Error: You are passing the delta object from the onChange event back as value. You most probably want editor.getContents() instead.

The rest of the script runs fine and writes everything into the database as expected, but React-Quill triggers the error and hangs up the page.

What do I need to do to define editor.getContents()?

export default class CreateDiscussionForm extends Component {
constructor(props){
super(props);
this.state = {
  error: '',
  editorHtml: ''
};
this.handleChange = this.handleChange.bind(this);
}

handleChange (html) {
 this.setState({ editorHtml: html });
}

onSubmit(e) {
 var background = this.state.editorHtml;
 console.log('background', background); //<p>testing</p>
 //... rest of code



<ReactQuill
    name="editor"
    theme={'snow'}
    ref="comment"
    onChange={this.handleChange}
    value={this.state.editorHtml}
    modules={quillModules}
    placeholder="add the discussion background (optional)"
/>

Thanks in advance - Bob

Answer 1

Not sure about why Quill interprets the initial value as a delta root, but i solved this warning by passing an empty string like this:

<ReactQuill
    name="editor"   
    onChange={this.handleChange}
    value={this.state.editorHtml || ''}
/>

The error links to here btw: https://github.com/zenoamaro/react-quill#using-deltas And this is a more advanced description of what Quill interprets as deltas: https://quilljs.com/docs/delta/ (basically, deltas are changes stored in json format, and they are handled apart from quill, meaning it's an external library)

Answer 2

I used it in a Form of an ant-design-pro project and fixed it by adding an initialValue:

 <FormItem labelCol={{ span: 2 }} wrapperCol={{ span: 30, offset: 2 }} label="Current Week Report">
        {form.getFieldDecorator('currentWeekReport', {
          rules: [{ required: true, message: 'Please enter at least five letters', min: 5 }],
          initialValue: ''
        })(<ReactQuill placeholder="please enter at least five letters" />)}
</FormItem>