I am using REACT JS with a FLUX IMPLEMENTATION called ALT.
I started with a working React Component:
ConfirmEditModal = React.createClass({
getInitialState(){
console.log('ConfirmEditModal - getInitialState');
var state = {sample: 'MY_SAMPLE_STATE'};
console.log(state);
return state;
},
onChange(state){
console.log('ConfirmEditModal - onChange');
console.log(state);
this.setState(state);
},
componentDidMount(){
console.log('ConfirmEditModal - componentDidMount');
//SeedStore.listen(this.onChange);
},
componentWillUnmount(){
//SeedStore.unlisten(this.onChange);
},
render(){
return (
<div className="ui modal edit">
<i className="close icon"></i>
<div className="header">Form For Editing</div>
<div className="content">
<div className="ui form">
<h4 className="ui dividing header">Birth Information</h4>
<div className="field">
<label>Name</label>
<input name="name" type="text" placeholder="Name"></input>
</div>
</div>
</div>
</div>
);
}
});
Pls note the commented out code of SeedStore.listen(this.onChange) and SeedStore.unlisten(this.onChange).
the above code works as long as those 2 lines are commented out.
Those 2 lines are the code required to listen to the store using ALT (FLUX IMPLEMENTATION).
If I uncomment those 2 lines I will end up with this code:
ConfirmEditModal = React.createClass({
getInitialState(){
console.log('ConfirmEditModal - getInitialState');
var state = {sample: 'MY_SAMPLE_STATE'};
console.log(state);
return state;
},
onChange(state){
console.log('ConfirmEditModal - onChange');
console.log(state);
this.setState(state);
},
componentDidMount(){
console.log('ConfirmEditModal - componentDidMount');
SeedStore.listen(this.onChange);
},
componentWillUnmount(){
SeedStore.unlisten(this.onChange);
},
render(){
return (
<div className="ui modal edit">
<i className="close icon"></i>
<div className="header">Form For Editing</div>
<div className="content">
<div className="ui form">
<h4 className="ui dividing header">Birth Information</h4>
<div className="field">
<label>Name</label>
<input name="name" type="text" placeholder="Name"></input>
</div>
</div>
</div>
</div>
);
}
});
and I get this error:
Error: Invariant Violation: findComponentRoot(..., .0.1.1.0.4.2.0.1.1): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID ``.
I would like to understand what is going on behind the scenes that would be causing this error, because as far as I can understand it....listening to a store just means that you listen to any state changes in the store and that's it....it has got nothing to do with parent child components and FINDING ELEMENTS.......
What's the explanation behind this error?
I would not have thought that listening to a store would affect finding of elements as the error suggests.
Other stackOverflow articles Q/A on this suggests that there are changes in the DOM that is not intended.....but listening to a store should not affect the DOM right??? thus my confusion.....
What's the logic and explanation behind this error?
