-
Notifications
You must be signed in to change notification settings - Fork 49.4k
Description
I'm experiencing an unexpected error related to "native" DOM events created in an "owner" component and triggered by DOM elements rendered by "owned" components. There's been a number of seemingly related issues, the closest being #3790 - but this might be a different edge case so I thought I'd create a new issue for it.
Reproduction
I've tried to whittle this down as much as possible:
(The JSFiddle is using 0.13.3, but I get the same error using 0.14.0-beta1)
https://jsfiddle.net/dmininger/8rdqhnox/
Steps
- Click "Go to Two"
- Click "Go to One"
- Click "Go to Two"
The second time component Two
is rendered React throws Invariant Violation: ReactMount: Two valid but unequal nodes with the same
data-reactid``
Notes
As I was trying to narrow down the cause, I found that under the following scenarios no error will be thrown:
- An onClick prop with an empty function (
onClick: function(){}
) is added to the "a" element in componentOne
. See https://jsfiddle.net/dmininger/kx98qfd2/ - The "input" element in component
Two
is removed (leaving the "form" element). See https://jsfiddle.net/dmininger/snjb8ysq/ - The return value of the render methods of components
One
andTwo
are inlined in the render method of theMain
component (i.e. everything is rendered by a single component). See https://jsfiddle.net/dmininger/3majxxL0/ - ONLY WHEN USING 0.14.0-beta1: The "form" element in component
Two
is removed (leaving the "input" element). (Sorry, no fiddle, is 0.14.0-beta1 on a CDN?) This still throws in 0.13.3.
Thanks!