TypeError: editorState.getCurrentContent is not a function

Question

I am trying to console the result from react draft wysiwyg and I am getting editorState.getCurrentContent is not a function. I am not sure where did I go wrong. Many thanks in advance and greatly appreciate any helps. Thanks

import React,{useState} from 'react'
import { render } from 'react-dom';
import { Editor } from 'react-draft-wysiwyg';
import {EditorState} from "draft-js";
import { stateToHTML } from "draft-js-export-html";
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

const AddBlog= () => {
    const [editorState, setEditorState] = useState(
        () => EditorState.createEmpty(),
      );

    const handleChange = (editorState) =>{
        const contentState = stateToHTML(editorState.getCurrentContent())
        // JSON.stringify(convertToRaw(editorState.getCurrentContent()))
        console.log(contentState)
       }


    return (
        <div className="container-fluid">
        <div className="card-wrapper-tutorial">
            <div className="card">
                <div className="card-body">
                <h4 className="card-title">New Code Snippet</h4>
                    <form autoComplete="off">
                        <div className="form-group">
                            <label htmlFor="title">Title</label>
                            <input id="title" type="text" className="form-control"  placeholder="title" name="title"  disabled = {disabled}  onChange={handleChange}  />
                        </div>
                        <div className="form-group">
                            <label htmlFor="body">Body</label>
                            <Editor  
                                defaultEditorState={editorState}
                                onEditorStateChange={setEditorState}
                                wrapperClassName="wrapper-class"
                                editorClassName="editor-class"
                                toolbarClassName="toolbar-class"
                                onChange={handleChange}
                                />
                        </div>
                       <div className="form-group">
                            <button type="submit" className="btn btn-primary btn-block">
                        {loading && <i className="fa fa-refresh fa-spin"></i>}
                        &nbsp;Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    )
}

export default AddBlog

Answer 1

You have the handleChange in two places which they don't belong

1. on the input's onChange, the callback for onChange would not be an editorState but and input event e.
2. on the Editor component, the callback for onChange would not be an editorState also but a RawDraftContentState which is the string html.

You probably meant to place it in the onEditorStateChange for Editor:

      <Editor
        defaultEditorState={editorState}
        onEditorStateChange={editorState => {
          setEditorState(editorState);
          handleChange(editorState);
        }}
        wrapperClassName="wrapper-class"
        editorClassName="editor-class"
        toolbarClassName="toolbar-class"
      />

or leaving the code as is and modifying the handleChange to expect RawDraftContentState

    const handleChange = (rawDraftContentState) =>{
        // no need for convertToRaw or stateToHtml anymore
        console.log(rawDraftContentState)
    }