Changing node type breaks invariant #1107
Description
This example:
<html>
<head>
<script type="text/javascript" src="http://fb.me/react-0.9.0-rc1.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/javascript">
var FailingComponent = React.createClass({
getInitialState: function() {
return {selecting: false}
},
handleAddClick: function(e) {
this.setState({selecting: true});
},
render: function() {
if (this.state.selecting) {
// This will cause Invariant violation
return React.DOM.input(null, '')
} else {
return React.DOM.div({onClick: this.handleAddClick}, "Press me");
}
}
});
React.renderComponent(FailingComponent(), document.getElementById('example'))
</script>
</body>
</html>
When one tries to click on a div an error will be raised:
Invariant Violation: ReactMount: Two valid but unequal nodes with the same data-reactid: .0
Does break with select/option pair instead of input tag as well (maybe some other tags as well, haven't checked them). Doesn't break with button tag and others.
Works flawlessly on React 0.8.0, doesn't work on master.