Failed to execute 'removeChild' on 'Node' in React component
<p>I setup a bootstrap alert that is dismissible. When the user clicks on the 'x', the onClick handler fires and dispatches an action to the store. I fire the action to re-populate a grid with the initial items in the grid before the alert. The action fires successfully, alert is dismissed, and the grid is re-populated. But I keep getting this error in the console:</p>

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

<p>I have omitted styles, imports etc. Any help would be greatly appreciated, thanks!</p>

<pre><code>class Grid extends Component {

  constructor(props) {
    super(props);

    this.handleClick = this.handleClick.bind(this);

  }


  handleClick() {
    this.props.dispatch(fetchAllItems(items))
  }

  render() {

    const { item } = this.props.grid;

    let display;

    if (item !== "not found") {
      display = (
        item.map((item, index) =&gt; {
          const imgPath = require(`../../api/images/${item.id}.png`);
          return (
            &lt;div key={index} className="col-xs-6 col-md-2"&gt;
              &lt;Link style={aTagStyle} className="thumbnail"&gt;
                &lt;img src={imgPath} style={imgStyle} /&gt;
                &lt;p style={textStyle}&gt;{item.url}&lt;/p&gt;
                &lt;p style={textStyle}&gt;{item.name}&lt;/p&gt;
              &lt;/Link&gt;
            &lt;/div&gt;
          );
        })
      );
    } else {
      display = (
        &lt;div className="alert alert-danger center-block" role="alert" style={alertStyle}&gt;
          &lt;a href="#" className="close" data-dismiss="alert" aria-label="close" onClick={this.handleClick}&gt;&amp;times;&lt;/a&gt;
          &lt;strong&gt;item Not Found, Please Try Again!&lt;/strong&gt;
        &lt;/div&gt;
      );      
    }

    return (
      &lt;div&gt;
        {display}
      &lt;/div&gt;
    );
  }
}
</code></pre>