Menu
I have a div where inside another three divs are appending as follows. The state values are setting by looping the result from an api from componentWillReceiveProps(). But I'm facing an issue with an error
Uncaught NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node
and if the api result is null gets
Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
How can I fix this?
componentWillReceiveProps(nextProps) {
var sub1 = [], sub2 = [], sub3 = [];
if(result) {
result.sub1.map((item, index) => {
sub1.push(
<div>
<p>{item.name}</p>
</div>
)
})
result.sub2.map((item, index) => {
sub2.push(
<div>
<p>{item.name}</p>
</div>
)
})
result.sub3.map((item, index) => {
sub3.push(
<div>
<p>{item.name}</p>
</div>
)
})
this.setState({ subDiv1:sub1, subDiv2:sub2, subDiv3:sub3 })
}
}
render() {
return(
<div className="row top_bar">
<div className="search left col-xs-5 col-sm-4 col-md-5 col-lg-6">
<form>
<input type="text" id="search_box" name="search_box" placeholder="Search" onKeyUp={this.keyUpFn} />
</form>
<div className="div1">
{ this.state.subDiv1 }
{ this.state.subDiv2 }
{ this.state.subDiv3 }
</div>
</div>
<div className="top_right col-xs-7 col-sm-8 col-md-7 col-lg-6">
<div className="top_outer">
</div>
</div>
</div>
)
}
519
Sometimes it happens when users use Google Translate, it mutates text nodes, and React breaks on the next render. More info and how to fix it: https://github.com/facebook/react/issues/11538#issuecomment-390386520
You can also add the next properties to the HTML tag to disable Google Translate and fix this problem:
<html class="notranslate" translate="no">
104
I believe this is failing because you are rendering outside of the render method. I also had this problem and it was because I had code like the following in my render method:
<div id="myContent">
{this.getMyContentFromAChildClass()}
</div>
And then elsewhere in the class, I was using a 3rd party library, SimpleBar, to add a scrollbar to the div using JQuery like so:
const myContentElement = $("#myContent")[0];
if (!this.scrollbar && myContentElement) {
this.scrollbar = new SimpleBar(myContentElement, {autoHide: false});
}
SimpleBar adds it's own divs in the mix, and when React tried to render the {this.getMyContentFromAChildClass() it was confused where to add it, and I got the above error message.
The fix was to not modify the parent div directly:
<div id="myContent">
<div id="addingThisExtraDivIsTheFix"> <-- Add This
{this.getMyContentFromAChildClass()}
</div>
</div>
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
