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.

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.

• javascript
• reactjs
• simplebar

Share Improve this question Follow edited Jan 25, 2023 at 18:22 icc97 12.9k99 gold badges8383 silver badges9797 bronze badges asked Feb 8, 2018 at 17:21 EdGEdG 2,35199 gold badges5252 silver badges110110 bronze badges 1

• I had the same problem, but in my case it was because the parent DIV had other element which was not a result of the map function. I've created an inner DIV and included the map inside it, and then the error was gone. – VitorMM Commented Jul 10, 2019 at 15:02

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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./facebook/react/issues/11538

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

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

Please add a reasonable key prop to the children.

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

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">Wele 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;