CODEWITHSUNDEEP
javascriptreactjs
BennKingy
BennKingy

Reputation: 1583

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

I am receiving this error "Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.". This is happening after my 3rd-4th drop down selection.

The first few times I select a drop down, the table is rendered fine, not sure why this is happening intermittently on the 3rd-4th times?!


Drop down select function:

public handleDropdownChange(e) {

this.setState({ selectedOption: e.target.value });

{ setTimeout(() => {

  this.getDocuments();

}, 1000); }

{ setTimeout(() => {

  this.renderDocuments();

}, 2000); }

}

Render documents function:

 public renderDocuments() {

const docs = this.state.documents.map(document => {

  return (
    <tr>
      <td className="title">{document.Cells.results[3].Value }</td>
      <td className="site">{siteName}</td>
      <td className="path">{sitePath}</td>
      <td><a href={document.Cells.results[6].Value + '?web=1&action=edit'}>View File</a></td>
    </tr> 
  );

});

return (

  <div id="tableID" className="table-list-container">

    <table className="table-list">

      <thead>
        <th><button type="button" className="sort" data-sort="title">Title</button></th>
        <th><button type="button" className="sort" data-sort="site">Site</button></th>
        <th><button type="button" className="sort" data-sort="path">Path</button></th>
        <th><button type="button">View File</button></th>
      </thead>

      <tbody className="list">

        {docs}

      </tbody>

    </table>

    <table className="table-footer">
      <tr>
        <td className="table-pagination">
          <ul className="pagination"></ul>
        </td>
      </tr>
    </table>

  </div>

);

   }

Render:

  public render(): React.ReactElement<IKimProps> {

    let { documents } = this.state;

    return (

      <div className={ styles.kim }>

        {"Display Items that are pending review by Favourite Colour:"}

        {documents.length === 0 && <p>Loading...</p>}

        <select id="dropdown" onChange={this.handleDropdownChange}>
          <option value="N/A">N/A</option>
          <option value="red">Red</option>
          <option value="green">Green</option>
          <option value="blue">Blue</option>
        </select>

        <br/><br/>

        {this.renderDocuments()}

     </div>

    );
  }

}

Upvotes: 0

Views: 1654

Answers (1)

Donzen
Donzen

Reputation: 76

You're right, JQuery and React being used together could have those results. There are enough packages for React, I recommend using one of those instead.

Upvotes: 1

Related Questions