Can't set editorState in draft.js (it appears immutable but with no error)

Question

I've got content saved to a DB using convertToRaw that I'm trying to load back into a draft.js editor to enable a user to re-edit the content.

The draft.js editor is contained within a react-modal based component that is shown when the user clicks 'edit' on the piece of content. This is important because the Modal (and the Editor) are not re-instantiated, they're just shown and hidden.

The Editor is initiated once in the (ES6) class constructor simply using:

this.state = {editorState: EditorState.createEmpty()}

When the user clicks 'edit' I load the raw content from the the DB, then I've tried loading my raw content into the Editor using a number of variants of:

const contentState = convertFromRaw(rawContent)
const newEditorState = EditorState.push(this.state.editorState, contentState);
this.setState({editorState: newEditorState})

But while newEditorState clearly contains the correct content, this.setState({editorState: newEditorState}) seems to have no effect at all on the state of the component (or the Editor).

How am I meant to set new state for the Editor? Thanks!

UPDATE On further investigation, it is clearly just this.setState({editorState: newEditorState}) which is failing just for the Editor component.

I've tested it by setting a test state property and updating it successfully, while the editorState remains unchanged.

To test this fully, in my constructor I've initialised state with test values using:

this.state = { 
    editorState:EditorState.createWithContent(ContentState.createFromText('Hello')),
    testVal: 'Test Val 1'
}

Then I've written some test code to show how setState works for my test value but not for the draft.js editorState:

const newEditorState = EditorState.createWithContent(ContentState.createFromText('Goodbye'))
console.log('Before setState')
console.log('newEditorState: ' + newEditorState.getCurrentContent().getPlainText());
console.log('editorState: ' + this.state.editorState.getCurrentContent().getPlainText());
console.log('testVal: ' + this.state.testVal);

this.setState({editorState: newEditorState, testVal: 'Test Val 2'}, function(){
    console.log('After setState')
    console.log('editorState: ' + this.state.editorState.getCurrentContent().getPlainText());
    console.log('testVal: ' + this.state.testVal);
});

The console output looks like:

Before setState
    newEditorState: Goodbye
    editorState: Hello
    testVal: Test Val 1
After setState
    editorState: Hello
    testVal: Test Val 2

I can't see why the draft.js editorState isn't being updated when the testVal is?

Danny S Danny S · Accepted Answer · 2016-08-02T13:48:09

OK, I've found out what the problem was.

I was setting the focus to the Editor immediately after trying to call setState().

i.e. I was calling focus() on the Editor, by moving the focus() call to before I try to setState, it all worked. Clearly accepting focus has an effect on the editorState.

Can't set editorState in draft.js (it appears immutable but with no error)

2 Answers