this.props.editorState.isInCompositionMode is not a function error in Draft.js of react

Question

My objective is to initialize Draft.js editor with the HTML which is retrieved from DB. Whenever I try to initialize editor, its throwing an error:

this.props.editorState.isInCompositionMode is not a function

For converting Draft.js contents into HTML, I have used, draft-js-export-html and for converting back to editorState object I have used draft-js-import-html.

I have mentioned code below which I have used:

Editor.js

    constructor(props) {
        super(props);

        this.state = {
            editorState: this.props.setEditorState,
         }
    }
    render(
       <Editor
            placeholder={"Please give details of news..."}
            editorState={this.state.editorState}
            handleKeyCommand={this.handleKeyCommand}
            keyBindingFn={this.keyBindingFunction}
            onChange={this.onChange} />
       );

MainBody.js

<EditComp setEditorState={stateFromHTML(response.data[i].htmlDesc)} />

Error that I have got in console is given below:

Uncaught TypeError: this.props.editorState.isInCompositionMode is not a function
    at DraftEditor._showPlaceholder (static/js/0.chunk.js:80878)
    at DraftEditor._renderPlaceholder (static/js/0.chunk.js:80882)
    at DraftEditor.render (static/js/0.chunk.js:80943)
    at finishClassComponent (static/js/0.chunk.js:153826)
    at updateClassComponent (static/js/0.chunk.js:153781)
    at beginWork$1 (static/js/0.chunk.js:155510)
    at HTMLUnknownElement.callCallback (static/js/0.chunk.js:135702)
    at Object.invokeGuardedCallbackDev (static/js/0.chunk.js:135751)
    at invokeGuardedCallback (static/js/0.chunk.js:135804)
    at beginWork$$1 (static/js/0.chunk.js:161088)
    at performUnitOfWork (static/js/0.chunk.js:160014)
    at workLoopSync (static/js/0.chunk.js:159987)
    at performSyncWorkOnRoot (static/js/0.chunk.js:159576)
    at static/js/0.chunk.js:147628
    at unstable_runWithPriority (static/js/0.chunk.js:187261)
    at runWithPriority$2 (static/js/0.chunk.js:147574)
    at flushSyncCallbackQueueImpl (static/js/0.chunk.js:147623)
    at flushSyncCallbackQueue (static/js/0.chunk.js:147611)
    at discreteUpdates$1 (static/js/0.chunk.js:159730)
    at discreteUpdates (static/js/0.chunk.js:136807)
    at dispatchDiscreteEvent (static/js/0.chunk.js:141282)

Is there any mistake that I have been making? Whats the reason of throwing that error?

Answer 1

Just one thing was missing. EditorState.createWithContent() needed. MainBody.js file code is edited with following code:

var contentState = stateFromHTML(this.props.setEditorState);

this.state = {
editorState: EditorState.createWithContent(contentState)
}