Reactjs: Invariant Violation: ReactMount: two valid but unequal nodes with the same `data-reactid`: .0.5

Question

Now I have encountered these problems when I use Reactjs and the "contentEditable" or "edit" html5 mode.

<div contenteditable="true"> <p data-reactid=".0.5">Reactjs</p> </div> 

When I type Enter or Shift Enter in a new line -> Create a new element with the previous element

 <div contenteditable="true"> <p data-reactid=".0.5">Reactjs</p> <p data-reactid=".0.5"></p> </div> 

When I click in abstract elements → this error will appear.

I know this is a problem. Can someone give me a solution? Maybe create another new element in "contenteditable" mode or prevent the implicit handle event in Reactjs.

THANKS.

Answer 1

This is a known issue: https://github.com/facebook/react/issues/1466

Using <div contentEditable dangerouslySetInnerHTML={{__html: '<p></p>'}} /> is the only workaround, for example.

Answer 2

I had a similar problem and solved this problem using key = {some random string} for a new element.