Warning: A component is `contentEditable` and contains `children` managed by React

The following is an example editor component

` import React from ‘react’; import {Editor, EditorState} from ‘draft-js’;

export default class MyEditor extends React.Component {

constructor(props) {
    super(props);

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

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

render() {
    const {editorState} = this.state;
    return <Editor editorState={editorState} onChange={this.onChange} />;
}

} `

And in my parent component

import MyEditor from './MyEditor'

… // in the render() method ` render() { let error = this.getError();

    return (
        <form className="post__form">
            {error}
            <div className="form-group">
                <label htmlFor="title">Title</label>
                <input type="text" ref="title" className="form-control" id="title" placeholder="Title" />
            </div>
            <div className="form-group">
                <label htmlFor="description">Description</label>

                <MyEditor />

            </div>
            <button type="submit" onClick={this.onClickHandler.bind(this)} className="btn btn-default">Submit</button>
        </form>
    );
}

`

And I see this warning

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.

[davisml]

I ended up adding this code to my project as a temporary solution:

console.error = (function() {
    var error = console.error

    return function(exception) {
        if ((exception + '').indexOf('Warning: A component is `contentEditable`') != 0) {
            error.apply(console, arguments)
        }
    }
})()

[RTeran]

With the suppressContentEditableWarning prop you can solve this issue