Draft-js: editorState.getCurrentContent is not a function

[jonathanwilke]

Hi,

I'm trying to get Draft.js to work with Redux and Reselect in my React project.
I'm setting the initial editorState in my reducer and then use it in my component.

import { fromJS } from 'immutable';
import { EditorState } from 'draft-js';
import {
  RECEIVE_EDITOR_CHANGE,
} from './constants';

const initialState = fromJS({
  editorState: EditorState.createEmpty(),
});

function writePageReducer(state = initialState, action) {
  switch (action.type) {
    case RECEIVE_EDITOR_CHANGE:
      return state
        .set('editorState', action.editorState);
    default:
      return state;
  }
}

<Editor editorState={this.props.editorState} onChange={this.props.editorChange} />

When I load the page I always get _editorState.getCurrentContent is not a function_ as an error.

[reme3d2y]

Hi,
I think you couldn't convert EditorState by fromJS.
EditorState isn't plain object.

"fromJS() - Deeply converts plain JS objects and arrays to Immutable Maps and Lists."

We have the same problem in our react-redux project.

[jonathanwilke]

So is there any way around this?

[reme3d2y]

You can save ContentState in redux store with convertToRaw, convertFromRaw.

In your component:

constructor(props) {
  super(props);

  const contentState = convertFromRaw(this.props.contentState);
  this.state.editorState = EditorState.createWithContent(contentState);
}

componentWillUnmount() {
  const contentState = this.state.editorState.getCurrentContent();
  // You can save contentState here or somewhere else.
  // this.props.onSave(convertToRaw(contentState));
}

this.onChange = (editorState) => this.setState({editorState});

<Editor editorState={this.state.editorState} ... onChange={this.onChange} />

[stopachka]

in your code, if you update

const initialState = fromJS({
  editorState: EditorState.createEmpty(),
});

to

const initialState = Map({
  editorState: EditorState.createEmpty(),
});

That would fix your problem.

As @reme3d2y suggested, you could also use convertFromRaw, if the editorState is coming from the outside

[ramisalem]

Hey stopachka I am getting the same issue I tried
const initialState = Map({ editorState: EditorState.createEmpty(), });
It giaves me the followwing error massage

×
TypeError: Constructor Map requires 'new'