Cannot read property 'getCurrentContent' of undefined

[adcoolguy]

We got this error while using it inside our React component. Our main codes:

var Editor = Draft.Editor;
...
    getInitialState: function() {
        var _this = this;
        this.state = { editorState: Draft.EditorState.createEmpty() };
        this.onChange = function (editorState) {
          return _this.setState({ editorState: editorState });
        };
...

    render: function() {
        var editorState = this.state.editorState;
...
                                    <div className="col-sm-10">
                                        <Editor editorState={editorState} onChange={this.onChange} />
                                    </div>
                                </div>
...

Do you know what is undefined?

[sophiebits]

Did you look at the stack trace to see what was calling it?

[adcoolguy]

Yes. It is:

angular.js:12722 TypeError: Cannot read property 'getCurrentContent' of undefined
at DraftEditor.render (http://localhost:8888/n/react/node_modules/draft-js/dist/Draft.js:4887:47)
at ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (http://localhost:8888/n/js/bower_components/react/react.js:5941:34)
at ReactCompositeComponentMixin._renderValidatedComponent (http://localhost:8888/n/js/bower_components/react/react.js:5961:32)
at wrapper as _renderValidatedComponent
at ReactCompositeComponentMixin.mountComponent (http://localhost:8888/n/js/bower_components/react/react.js:5574:30)
at wrapper as mountComponent
at Object.ReactReconciler.mountComponent (http://localhost:8888/n/js/bower_components/react/react.js:12974:35)
at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (http://localhost:8888/n/js/bower_components/react/react.js:11688:44)
at ReactDOMComponent.Mixin._createContentMarkup (http://localhost:8888/n/js/bower_components/react/react.js:6815:32)
at ReactDOMComponent.Mixin.mountComponent (http://localhost:8888/n/js/bower_components/react/react.js:6703:29)

(anonymous function) @ angular.js:12722(anonymous function) @ angular.js:9490invokeLinkFn @ angular.js:9041nodeLinkFn @ angular.js:8533compositeLinkFn @ angular.js:7929publicLinkFn @ angular.js:7809k @ angular-ui-router.min.js:7(anonymous function) @ angular-ui-router.min.js:7Scope.$broadcast @ angular.js:16573y.transition.J.then.y.transition.y.transition @ angular-ui-router.min.js:7processQueue @ angular.js:14991(anonymous function) @ angular.js:15007Scope.$eval @ angular.js:16251Scope.$digest @ angular.js:16069Scope.$apply @ angular.js:16359done @ angular.js:10791completeRequest @ angular.js:10989requestLoaded @ angular.js:10930

[tasti]

Did you forget to return this.state; in getInitialState()? It seems like in your render(), this.state.editorState is not defined.

That's the only way I can repro your error.

[hellendag]

@tasti++

this.state = { ... } should be used for ES6 React classes. With React.createClass, you'll need to return the object from getInitialState and should not set this.state at all.

[hellendag]

Closing this, as it seems related to the ES6 vs. createClass conflation.

[adcoolguy]

You are right guys. I fixed that. But now I have two issues, one is the new error:

react.js:18794 Warning: A component is contentEditable and contains children managed by React. It is now your responsibility to guarantee that none of those nodes are unexpectedly modified or duplicated. This is probably not intentional.

And I do not seem to be able to make the text rich text, bold for instance. My input:

                            <div className="control-group">
                                <label htmlFor="desc" className="col-sm-2 control-label">Description:</label>
                                <div className="col-sm-10">
                                    <Editor editorState={editorState} onChange={this.onChange} />
                                </div>
                            </div>

Any idea what are the reason and how to avoid that error? Thanks so much your awesome response!

[tasti]

1. Discussed fix contentEditable warning #98
2. Did you take a look at the rich (https://github.com/facebook/draft-js/tree/master/examples/rich) example? The Editor starts off as a plaintext editor, so you need to tell it that you want to handle rich text for it to do so.

[adcoolguy]

Amazing! I will check it out. Thanks!