Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Now, I met this issues when I use Reactjs and "contentEditable" or "edit" mode of html5.

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

When I type Enter or Shift Enter to new line -> Make new same 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 theses elements -> this error will appear.

I know that is an issue. Can someone give me the solution for it? Maybe create new another element in "contenteditable" mode, or prevent handle implicit event in Reactjs.

THanks.

like image 799
LogPi Avatar asked Oct 22 '14 15:10

LogPi


People also ask

What is invariant violation react?

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of 'App'.

What method would you use to handle the following errors encountered during the rendering process?

React provides two lifecycle methods that a component can implement to determine if a rendering error has occurred in its child tree and respond accordingly. These two methods are componentDidCatch() and static getDerivedStateFromError() .

How do I get error message from API response in react?

Make the api call, the server (assuming you are also building the server) should check to see if the name and phone number already exist. If they already exist the server should return an error. In your react app catch the error after your API call and assign it to your state variable for error.


1 Answers

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

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

like image 183
Zakaria Avatar answered Nov 04 '22 12:11

Zakaria