Error in console when adding the editor dynamically

I’m new to draft.js but hit a problem that I was hoping that someone with more more experience and knows the inner workings of the editor can help me or maybe this is something that needs to be fixed.

I’m trying to add the Editor from draft-js-plugins-editor to a page dynamically when user selects from a drop down, but I get a strange error in the console that does not appear when I use the original Editor from draftjs. Looks like it is not creating a instance of itself for some reason. This only happens when I add the LanguageEditor component to my Languages component after selecting from the LanguageSelect component dropdown, not when I add it on first render.

The error I get in the console is something like this DraftEditorLeaf.react.js:97 Uncaught TypeError: Cannot read property ‘textContent’ of null. And while debugging this.refs.leaf is empty so ReactDOM.findDOMNode can’t find it.

To get a better understanding of the problem I have the code below that returns me the following in the console twice: render undefined en-GB after user has selected a Language from the LanguageSelect and also the console error. It looks like the draft-js-plugins-editor in never created but it is still there and working. But has this error in the console.

 export default class LanguageEditor extends React.Component {

    state = {
        editorState: EditorState.createWithContent(ContentState.createFromText(this.props.initialValue.text || '')),
        suggestions: this.props.mentions,
        mentionPlugin: createMentionPlugin()
    };

    ...

    render () {
        const { code } = this.props;
        const { editorState, suggestions, mentionPlugin } = this.state;

        const { MentionSuggestions } = this.state.mentionPlugin;

        console.log('render', this.refs.editor, code);

        return (
            <div>
                <Editor
                    editorState={editorState}
                    onChange={this.onAreaChange}
                    plugins={[mentionPlugin]}
                    ref="editor"

                />
                <MentionSuggestions
                    onSearchChange={this.onSearchChange}
                    suggestions={ suggestions }
                />

            </div>
        )
    }
}

 export default class Languages extends React.Component {

    ...

    addLanguage = ( option ) => {
        if ( option ) {
            ...
            const newLang = { code: option.value };
            translations.push(newLang);
        }
    };

    render () {
        const { translations } = this.props;

        return (
            <div className={ styles.container }>                
                {
                    map(translations, ( t ) => {
                        return (
                            <div ... key={ t.code }>
                                <LanguageEditor
                                    code={ t.code }
                                    initialValue={ {
                                        text: t.text
                                    }}
                                    onChange={ this.handleChange }
                                />
                            </div>
                        );
                    })
                }       
                <LanguageSelect onChange={ this.addLanguage } />        
            </div>
        );
    }
} ```

[spoldman]

After updating to react 15.3 the error message disappeared and everything appears to be working properly. Now I will have to go through my code to fix all the unknown props warnings after this upgrade. Thanks for the help!

[jcgertig]

actually the error message is slightly different (Cant find property reduce of undefined line 134 in DraftEditorLeaf.render) but it only happens when its dynamic I can use the html to state before the component is rendered and its fine.