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 component One. 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 and Two are inlined in the render method of the Main 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!
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
The second time component
Twois rendered React throwsInvariant Violation: ReactMount: Two valid but unequal nodes with the samedata-reactid``Notes
As I was trying to narrow down the cause, I found that under the following scenarios no error will be thrown:
onClick: function(){}) is added to the "a" element in componentOne. See https://jsfiddle.net/dmininger/kx98qfd2/Twois removed (leaving the "form" element). See https://jsfiddle.net/dmininger/snjb8ysq/OneandTwoare inlined in the render method of theMaincomponent (i.e. everything is rendered by a single component). See https://jsfiddle.net/dmininger/3majxxL0/Twois removed (leaving the "input" element). (Sorry, no fiddle, is 0.14.0-beta1 on a CDN?) This still throws in 0.13.3.Thanks!