React contenteditable in stateless component

Question

I am trying to implement a contenteditable div inside a stateless react component.

I keep getting the below warning:

warning.js:36 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.

How do I fix this?

Also how do I read contents of div on change?

Answer 1

Add suppressContentEditableWarning="true" to contenteditable div.

Reference: https://github.com/facebook/draft-js/issues/81

Answer 2

As with any React application, browser plugins and extensions that modify the DOM can cause Draft editors to break.

Grammar checkers, for instance, may modify the DOM within contentEditable elements, adding styles like underlines and backgrounds. Since React cannot reconcile the DOM if the browser does not match its expectations, the editor state may fail to remain in sync with the DOM.

https://github.com/facebook/draft-js/issues/53

A known error. As for reading whats in a div, assign the element an id and..

oDoc = document.getElementById("divelement");
sDefTxt = oDoc.innerHTML;

Answer 3

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

Resolved by adding...

//...
<div 
   suppressContentEditableWarning={true} // <-- Add this
   className="MyClass"
   onClick={ ()=> { onEidtHandler() } }
   onBlur={ ()=> { onSaveHandler() }
  >
    Editable content
</div>
//...