CODEWITHSUNDEEP
javascriptreactjssimplebar
EdG
EdG

Reputation: 2351

React error: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node

I am trying to map the response I get from an api call. I want to render a div in this map. This is what my code looks like:

<div data-simplebar className="img-scroll">
    {this.state.imageSearchResults.items.map((item, ind) => {
        return <div className="image-square" style={{backgroundImage:`url(${this.state.imageSearchResults.items[0].link})`}}></div>
    })}
</div>

I am getting an error saying

Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

What is wrong with this? I have done mapping in same way in the past and never got such an error.

Upvotes: 5

Views: 14118

Answers (4)

Jammar
Jammar

Reputation: 446

If anyone stumbles upon this problem while a page is being translated in Google Chrome, it's likely it has something to do with this:

https://github.com/facebook/react/issues/11538

It's an old issue that's yet to be solved by the Chrome team:

https://bugs.chromium.org/p/chromium/issues/detail?id=872770

Upvotes: 2

PavelS
PavelS

Reputation: 51

Looking at this <div data-simplebar className="img-scroll"> in your question, it looks like you are using the 'simplebar' plugin, which changes the DOM tree and breaks React.

Try to use the package for React 'simplebar-react' instead, it works correctly.

React example:

import React, { Component } from 'react';
import SimpleBar from 'simplebar-react';

import 'simplebar/dist/simplebar.min.css';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <SimpleBar style={{ height: '300px' }}>
          {[...Array(50)].map((x, i) =>
            <p key={i} className="odd">Some content</p>
          )}
        </SimpleBar>
      </div>
    );
  }
}

export default App;

Upvotes: 1

ShaMoh
ShaMoh

Reputation: 1570

Wrapping up the translatable text within <p> or <span> sorted out issue for me

Upvotes: 1

Dennie de Lange
Dennie de Lange

Reputation: 2934

Please add a reasonable key prop to the children.

Upvotes: 1

Related Questions