t7bdh3hdhb t7bdh3hdhb - 9 months ago 146
React JSX Question

React: Error on props update from parent (Failed to execute removeChild)

I'm using react and ajax to fetch data for a list. After first init I always get the following error when

is executed. This happens when the URL for the ajax changed.

Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Here is the code:

class QuickList extends React.Component{
constructor(props) {

// set initial data to empty array
this.state = {
data: []


url: url,
type: 'GET',
dataType: 'json',
cache: false,
success: (data) => {
this.setState({data: data});
error: (xhr, status, err) => {
console.error(this.props.url, status, err.toString());

componentWillReceiveProps(nextProps) {
console.log('url: ', nextProps.url);

console.log('url: ', this.props.url);
// if component is mounted then fetch data from server

render() {
return (
<div className='container-fluid text-center'>
<div className='row'>
<div className='col-sm-12'>
<CustomDataTable data={this.state.data} />

// defined in return of other react component
<QuickList url={quickListURL} />

Any ideas?


Since the issue is with the CustomDataTable, you can try to parse in there further to debug the issue, but without seeing the code, the only thing I could recommend is to force an unmount of that component when the URL changes.

<CustomDataTable key={this.props.url} data={this.state.data} />

This should cause the component to remount whenever the key changes.