title: ReactJS: Failed to execute 'removeChild' on 'Node' when updating component
body: <p>I keep getting this error when attempting to update a component with new data fetched from a server.</p>
  
  <h2>Description:</h2>
  
  <ul>
  <li><h3>Portfolio.js</h3>
  
  <p>I have an app that has a portfolio where the projects of the site are    shown. When you click an item in portfolio, you are redirected (with     react-router) to the individual project.</p></li>
  <li><h3>Project.js</h3>
  
  <p>The project component uses the fetch api to retrieve data from a server. Which works perfectly because when the url specifies the project to be show like: <code>/portfolio/project/:id</code>, and based on the id received the data is fetched and displayed correctly.</p></li>
  <li><h3>The data retrieved</h3>
  
  <p>What is retrieved trough fetch api is just the result of a AJAX POST request to a server with the only parameter of the project id, which only returns the info of the project. (name, description, images, and other ones not much important)</p></li>
  </ul>
  
  <h2>The issue:</h2>
  
  <p>As far I've analyzed the application to see when this error is triggered, I found that this warning comes out when the amount of images for the new project loaded is smaller than the amount of images of the project already rendered. </p>
  
  <h3>An example:</h3>
  
  <p>We are inside a project. The url is <code>portfolio/project/1</code> and the server data returned that this project has 5 images. They are loaded and you can view the project correctly.</p>
  
  <p>Now, we use the menu to react-router-redirect to <code>portfolio/project/2</code> and the server returned data with 7 images. They are loaded and the project data as well to view the project.</p>
  
  <p>So, let say that we choose the option in the menu to view the project <code>portfolio/project/3</code> which has 3 images, and then the warning comes up. </p>
  
  <p>Browser:
  <a href="https://i.stack.imgur.com/nV5fX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nV5fX.png" alt="Error content"></a>
  Console log:
  <a href="https://i.stack.imgur.com/V3iDD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/V3iDD.png" alt="Console log"></a></p>
  
  <h2>The code:</h2>
  
  <p>Since the error says the problem is inside Project.js, I am only adding this code so the question doesn't look overloaded and full of weird code.</p>
  
  <h3>Project.js</h3>
  
  <pre><code>import React,{Component} from 'react'
  import Footer from '../Footer/Footer'
  import Header from '../Header'
  import SubNav from '../SubNav'
  import Details from './Details'
  import {Link} from 'react-router-dom'
  import {Configurations} from '../AppConfig'
  
  class Project extends Component{
  
  state = {
              projectInfo: null,
              reloadHandlerActive: false,
              projectID : this.props.match.params.id,
              projectName: "",
              topProjectInfo: [],
              images: []
  }
  
  createImages = (project) =&gt;{
    let Images = Object.values(project.images),
        ImagesURI = Images.map((img, index)=&gt;{
          if( img.includes('Desarrollos.jpg') || img.includes('Home.jpg') || img.includes('H.jpg') ){
            return null
          }
        return project.path+img
        })
    ImagesURI = ImagesURI.filter(function (e) { //Clear null values
      return e != null;
    })
    return ImagesURI
  }
  
      reloadHandler = (id) =&gt;{
        const {createImages} = this
        fetch(Configurations.API.projectInfo(id))
          .then((result)=&gt;{return result.json() })
          .then((project)=&gt;{
            if(project === "error"){
              alert("Error")
            }else{
                this.setState({
                  projectInfo: project,
                  images: createImages(project)
                },function(){
                  document.getElementsByClassName("nav-button")[0].click()
                })
            }
          })
      }
  
      componentWillMount(){
        const {createImages} = this
        fetch(Configurations.API.projectInfo(this.state.projectID))
          .then((result)=&gt;{return result.json() })
          .then((project)=&gt;{
            if(project === "error"){
              alert("Error")
            }else{
              this.setState({
                projectInfo: project,
                images: createImages(project)
              },function(){
                window.initDogma()
              })
            }
          })
      }
  
      componentDidMount(){
        window.onload = window.initShit()
      }
  
      render(){
        const {projectInfo,images} = this.state
        console.log(projectInfo)
  
        if(!projectInfo){
          return(&lt;h1&gt;. . .&lt;/h1&gt;)
        }
        return(
            &lt;div &gt;
                &lt;Header /&gt;
                &lt;SubNav reloadHandler={this.reloadHandler} /&gt;
                &lt;div className="content full-height no-padding"&gt;
  
                &lt;div className="fixed-info-container"&gt;
                &lt;Link to="/portfolio"&gt;&lt;button className="goBackBtn"&gt;Desarrollos&lt;/button&gt;&lt;/Link&gt;
                  &lt;h3&gt;{projectInfo.project.project}&lt;/h3&gt;
                    &lt;div className="separator" /&gt;
                    &lt;div className="clearfix" /&gt;
                    &lt;p&gt;
                      {projectInfo.project.address}
                    &lt;/p&gt;
                    &lt;span className="project-status"&gt;{projectInfo.project.status}&lt;/span&gt;
                    &lt;h4&gt;Características&lt;/h4&gt;
                    &lt;Details price={projectInfo.project.price} features={projectInfo.project.features} /&gt;
                    &lt;Link className=" btn anim-button   trans-btn   transition  fl-l" to={"/contact/?project="+projectInfo.id}&gt; 
                      &lt;span&gt;Informes&lt;/span&gt;
                      &lt;i className="fa fa-eye" /&gt;
                    &lt;/Link&gt;
                    &lt;/div&gt;
  
  
                {/*  fixed-info-container end*/}
                {/*  resize-carousel-holder*/}
                &lt;div className="resize-carousel-holder vis-info gallery-horizontal-holder"&gt;
                  {/*  gallery_horizontal*/}
                  &lt;div
                    id="gallery_horizontal"
                    className="gallery_horizontal owl_carousel"
                  &gt;
                    {
                      images.map((img,index)=&gt;{
                        return (
                        &lt;div key={index}className="horizontal_item"&gt;
                          &lt;div className="zoomimage"&gt;
                            &lt;img src={img} className="intense" alt="" /&gt;
                            &lt;i className="fa fa-expand" /&gt;
                          &lt;/div&gt;
                          &lt;img src={img} alt="" /&gt;
                          &lt;div className="show-info"&gt;
                            &lt;span&gt;Info&lt;/span&gt;
                            &lt;div className="tooltip-info"&gt;
                              &lt;h5&gt;Imagen de muestra&lt;/h5&gt;
                              &lt;p&gt;
                                Imagen del desarrollo
                              &lt;/p&gt;
                            &lt;/div&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                        )
                      })
                    }
                  &lt;/div&gt;
                  {/*  resize-carousel-holder*/}
                  {/*  navigation */}
                  &lt;div className="customNavigation"&gt;
                    &lt;a href="/" className="prev-slide transition"&gt;
                      &lt;i className="fa fa-angle-left" /&gt;
                    &lt;/a&gt;
                    &lt;a href="/" className="next-slide transition"&gt;
                      &lt;i className="fa fa-angle-right" /&gt;
                    &lt;/a&gt;
                  &lt;/div&gt;
                  {/*  navigation end*/}
                &lt;/div&gt;
                {/*  gallery_horizontal end*/}
              &lt;/div&gt;
              &lt;Footer /&gt;
              &lt;/div&gt;
          )
      }
  }
  export default Project
  </code></pre>
  
  <p>I'm currently looking how to fix this, but if someone could give me an advice or the origin of the issue would be really helpful.</p>