editorState.getCurrentContent is not a function

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]

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