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.
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'.
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() .
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With