title: react: the DOM loading is too fast, leaving no time to load the items from API
body: <p>I am new to the community, however I am French speaking, if the understanding of English is not correct, it's because I am using a translator.</p>
  <p>I am busy redesigning a website, however, it was originally hardcoded all in html, javascript and jquery.</p>
  <p>I convert it with React 17.0.x</p>
  <p>however, I have a rendering problem on one of the pages, it is a photo gallery page.
  there are buttons which allow to select the category of image, then the images of this categorie is displayed below with a display of grid</p>
  <p>When I code it hard, the grid of the images displays correctly, but when I do call the images from the API, the images show one under the other and the buttons do not work. I have to press the F5 key several times simultaneously so that all the images are displayed correctly and that the buttons work.</p>
  <p><strong>Original (hard coding) in de &quot;render&quot; of page/gallerie.js:</strong></p>
  <pre><code>    &lt;section id=&quot;gallery&quot; class=&quot;gallery-area section-padding&quot;&gt;
          &lt;div class=&quot;container&quot;&gt;
              &lt;div class=&quot;row&quot;&gt;
                  &lt;div class=&quot;col-lg-12 col-md-12&quot;&gt;
                      &lt;div class=&quot;section-title&quot;&gt;
                          &lt;h5&gt;Delicious Food Gallery&lt;/h5&gt;
                          &lt;h2&gt;Resturant Gallery&lt;/h2&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;row&quot;&gt;
                  &lt;div class=&quot;col-md-12&quot;&gt;
                      &lt;div class=&quot;gallery-list&quot;&gt;
                          &lt;ul class=&quot;nav&quot; id=&quot;gallery-flters&quot;&gt;
                              &lt;li class=&quot;filter filter-active&quot; data-filter=&quot;.all&quot;&gt;all&lt;/li&gt;
                              &lt;li class=&quot;filter&quot; data-filter=&quot;.breakfast&quot;&gt;Break Fast&lt;/li&gt;
                              &lt;li class=&quot;filter&quot; data-filter=&quot;.lunch&quot;&gt;Lunch&lt;/li&gt;
                              &lt;li class=&quot;filter&quot; data-filter=&quot;.dinner&quot;&gt;Dinner&lt;/li&gt;
                              &lt;li class=&quot;filter&quot; data-filter=&quot;.dessert&quot;&gt;Dessert&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;gallery-container&quot;&gt;
                      &lt;!-- gallery-item --&gt;
                      &lt;div class=&quot;col-lg-4 col-md-6 gallery-grid-item all lunch dessert&quot;&gt;
                          &lt;div class=&quot;gallery-item&quot;&gt;
                              &lt;img src=&quot;assets/img/gallery/gallery-1.jpg&quot; alt=&quot;image&quot;&gt;
                              &lt;div class=&quot;gallery-img-overlay&quot;&gt;
                                  &lt;div class=&quot;gallery-content&quot;&gt;
                                      &lt;div class=&quot;info&quot;&gt;
                                          &lt;h6&gt;Break Fast&lt;/h6&gt;
                                      &lt;/div&gt;
                                      &lt;a href=&quot;assets/img/gallery/gallery-1.jpg&quot; class=&quot;popimg&quot;&gt;  &lt;span class=&quot;icon&quot;&gt;&lt;i class=&quot;icofont-picture&quot;&gt;&lt;/i&gt;&lt;/span&gt;
                                      &lt;/a&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;!-- gallery-item --&gt;
                      &lt;div class=&quot;col-lg-4 col-md-6 gallery-grid-item all dinner breakfast&quot;&gt;
                          &lt;div class=&quot;gallery-item&quot;&gt;
                              &lt;img src=&quot;assets/img/gallery/gallery-2.jpg&quot; alt=&quot;image&quot;&gt;
                              &lt;div class=&quot;gallery-img-overlay&quot;&gt;
                                  &lt;div class=&quot;gallery-content&quot;&gt;
                                      &lt;div class=&quot;info&quot;&gt;
                                          &lt;h6&gt;Lunch&lt;/h6&gt;
                                      &lt;/div&gt;
                                      &lt;a href=&quot;assets/img/gallery/gallery-2.jpg&quot; class=&quot;popimg&quot;&gt;  &lt;span class=&quot;icon&quot;&gt;&lt;i class=&quot;icofont-picture&quot;&gt;&lt;/i&gt;&lt;/span&gt;
                                      &lt;/a&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;!-- gallery-item --&gt;
                      &lt;div class=&quot;col-lg-4 col-md-6 gallery-grid-item all lunch dessert&quot;&gt;
                          &lt;div class=&quot;gallery-item&quot;&gt;
                              &lt;img src=&quot;assets/img/gallery/gallery-3.jpg&quot; alt=&quot;image&quot;&gt;
                              &lt;div class=&quot;gallery-img-overlay&quot;&gt;
                                  &lt;div class=&quot;gallery-content&quot;&gt;
                                      &lt;div class=&quot;info&quot;&gt;
                                          &lt;h6&gt;Dinner&lt;/h6&gt;
                                      &lt;/div&gt;
                                      &lt;a href=&quot;assets/img/gallery/gallery-3.jpg&quot; class=&quot;popimg&quot;&gt;  &lt;span class=&quot;icon&quot;&gt;&lt;i class=&quot;icofont-picture&quot;&gt;&lt;/i&gt;&lt;/span&gt;
                                      &lt;/a&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;!-- gallery-item --&gt;
                      &lt;div class=&quot;col-lg-4 col-md-6 gallery-grid-item all lunch webdesig breakfastn&quot;&gt;
                          &lt;div class=&quot;gallery-item&quot;&gt;
                              &lt;img src=&quot;assets/img/gallery/gallery-4.jpg&quot; alt=&quot;image&quot;&gt;
                              &lt;div class=&quot;gallery-img-overlay&quot;&gt;
                                  &lt;div class=&quot;gallery-content&quot;&gt;
                                      &lt;div class=&quot;info&quot;&gt;
                                          &lt;h6&gt;Dessert&lt;/h6&gt;
                                      &lt;/div&gt;
                                      &lt;a href=&quot;assets/img/gallery/gallery-4.jpg&quot; class=&quot;popimg&quot;&gt;  &lt;span class=&quot;icon&quot;&gt;&lt;i class=&quot;icofont-picture&quot;&gt;&lt;/i&gt;&lt;/span&gt;
                                      &lt;/a&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;!-- gallery-item --&gt;
                      &lt;div class=&quot;col-lg-4 col-md-6 gallery-grid-item all dinner dessert breakfast&quot;&gt;
                          &lt;div class=&quot;gallery-item&quot;&gt;
                              &lt;img src=&quot;assets/img/gallery/gallery-5.jpg&quot; alt=&quot;image&quot;&gt;
                              &lt;div class=&quot;gallery-img-overlay&quot;&gt;
                                  &lt;div class=&quot;gallery-content&quot;&gt;
                                      &lt;div class=&quot;info&quot;&gt;
                                          &lt;h6&gt;Break Fast&lt;/h6&gt;
                                      &lt;/div&gt;
                                      &lt;a href=&quot;assets/img/gallery/gallery-5.jpg&quot; class=&quot;popimg&quot;&gt;  &lt;span class=&quot;icon&quot;&gt;&lt;i class=&quot;icofont-picture&quot;&gt;&lt;/i&gt;&lt;/span&gt;
                                      &lt;/a&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;!-- gallery-item --&gt;
                      &lt;div class=&quot;col-lg-4 col-md-6 gallery-grid-item all dinner dessert breakfast&quot;&gt;
                          &lt;div class=&quot;gallery-item&quot;&gt;
                              &lt;img src=&quot;assets/img/gallery/gallery-6.jpg&quot; alt=&quot;image&quot;&gt;
                              &lt;div class=&quot;gallery-img-overlay&quot;&gt;
                                  &lt;div class=&quot;gallery-content&quot;&gt;
                                      &lt;div class=&quot;info&quot;&gt;
                                          &lt;h6&gt;Lunch&lt;/h6&gt;
                                      &lt;/div&gt;
                                      &lt;a href=&quot;assets/img/gallery/gallery-6.jpg&quot; class=&quot;popimg&quot;&gt;  &lt;span class=&quot;icon&quot;&gt;&lt;i class=&quot;icofont-picture&quot;&gt;&lt;/i&gt;&lt;/span&gt;
                                      &lt;/a&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  </code></pre>
  <p><strong>Main.js, functional script for isotope and MagnificPopup</strong></p>
  <pre><code>    
      // MagnificPopup 
      $('.gallery-container').magnificPopup({
          delegate: '.popimg',
          type: 'image',
          gallery: {
              enabled: true
          }
      });
      
      // Porfolio isotope and filter
      $(window).on('load', function () {
          var galleryIsotope = $('.gallery-container').isotope({
              itemSelector: '.gallery-grid-item'
          });
          $('#gallery-flters li').on('click', function () {
              $(&quot;#gallery-flters li&quot;).removeClass('filter-active');
              $(this).addClass('filter-active');
              galleryIsotope.isotope({
                  filter: $(this).data('filter')
              });
          });
      });
  </code></pre>
  <p><a href="https://i.stack.imgur.com/BiiS7.jpg" rel="nofollow noreferrer">Here the display is correct in hard coding, the filter buttons work correctly (See this screenshot)</a></p>
  <p><strong>version modify for react</strong></p>
  <p><strong>File - &gt; &quot;page/Restaurant.js&quot; :</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import { HeaderCarousel, Gallery, Sponsoring } from 'components';
  
  class Restaurant extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              galleryObj: [],
              gallerydescObj : [],
              galleryListObj : []
          };
        }
      componentDidMount() {
          
         const API_URL  = process.env.REACT_APP_API_URL;
         const promises = Promise.all([
              fetch(API_URL + 'gallery'),
              fetch(API_URL + 'gallerydesc'),
              fetch(API_URL + 'listgallery')
          ]);
      
          promises
            .then((results) =&gt; 
              Promise.all( results.map(r =&gt; r.json()) )
            )
            .then( ([dataGallery, dataGallerydesc, dataGalleryList, ]) =&gt; {
                this.setState({
                  galleryObj: dataGallery,
                  gallerydescObj: dataGallerydesc,
                  galleryListObj: dataGalleryList
  
              })
            })
            .catch((error) =&gt; {
              console.log(error)
            });
            
  
        }
  
    render() {
  
  
  
        return (
          &lt;div  className=&quot;galerie&quot;&gt;
  
                      &lt;HeaderCarousel /&gt; 
    
                      &lt;Gallery 
                          descs=      { this.state.gallerydescObj }
                          items=      { this.state.galleryObj }
                          filters=    { this.state.galleryListObj }
                      /&gt;
  
                      &lt;Sponsoring /&gt; 
  
          &lt;/div&gt;          
        );
      }
  }
  
  export default Restaurant;
  </code></pre>
  <p><strong>File - &gt; &quot;component/Gallery.js&quot; :</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import { Container, Row, Col } from 'reactstrap';
  import {Filter} from &quot;./Filter&quot;;
  import { Images, Filter} from &quot;./index&quot;;
  
  class Gallery extends React.Component {
  
    render() {
  
      const descs = this.props.descs;
  
      const title = descs.map(function(desc, index){
  
              return  &lt;div key={index} className=&quot;section-title&quot;&gt;
                        &lt;h5&gt;{ desc.introdesc }&lt;/h5&gt;
                        &lt;h2&gt;{ desc.titledesc }&lt;/h2&gt;
                      &lt;/div&gt;
            })
  
      return ( &lt;section id=&quot;gallery&quot; className=&quot;gallery-area section-padding&quot;&gt;
                  &lt;Container&gt;
                    &lt;Row&gt;
                      &lt;Col lg=&quot;12&quot; md=&quot;12&quot;&gt;
                        {title}
                      &lt;/Col&gt;
                    &lt;/Row&gt;
                    &lt;Row&gt;
                      &lt;Col md=&quot;12&quot;&gt;
                        &lt;Filter filters = {this.props.filters} /&gt;
                      &lt;/Col&gt;
                        &lt;Images galleries = {this.props.items} /&gt;
                    &lt;/Row&gt;
                  &lt;/Container&gt;
                &lt;/section&gt;
        
      );
    }
  }
  
  export default Gallery;
  </code></pre>
  <p><strong>File - &gt; &quot;component/index.js&quot; :</strong></p>
  <pre><code>export { default as Filter } from './Filter';
  export { default as Image } from './Image';
  
  </code></pre>
  <p><strong>File - &gt; &quot;component/Filter.js&quot; :</strong></p>
  <pre><code>import React from &quot;react&quot;;
  
  class Filter extends React.Component {
  
  
    render() {
  
      const filters = this.props.filters;
  
  
       const catFilter = filters.map(function(cat, index){
  
        const nameLowerCase = cat.name.toLowerCase();
        const nameFilter = &quot;.&quot;+ nameLowerCase;
        
        return  &lt;li key={index} className=&quot;filter&quot; data-filter={nameFilter}&gt;
                  {nameLowerCase}
                &lt;/li&gt;
        })      
  
      return ( &lt;div className=&quot;gallery-list&quot;&gt;
                  &lt;ul className=&quot;nav&quot; id=&quot;gallery-flters&quot;&gt;
                      &lt;li className=&quot;filter filter-active&quot; data-filter=&quot;.all&quot;&gt;all&lt;/li&gt;
                      {catFilter}
                  &lt;/ul&gt;
              &lt;/div&gt;
        
      );
    }
  }
  
  export default Filter;
  </code></pre>
  <p><strong>File - &gt; &quot;component/Images.js&quot; :</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import imageUrl from 'constants/imageUrl';
  import { Col } from 'reactstrap';
  
  class Image extends React.Component {
  
    render() {
  
      const galleries = this.props.galleries;
   
      const medias = galleries.map(function(item){
  
          const name = item.name.toLowerCase();
          const image = item.Medias.map(function(media){ return media });
  
          const imgs = image.map(function(img, index){
          
            const classCat  = 'gallery-grid-item all ' + name; 
            const imageURL  = imageUrl.Galerie + img.image;
    
            return  &lt;Col lg=&quot;4&quot; md=&quot;6&quot; key={index}  className={classCat}&gt;
                      &lt;div className=&quot;gallery-item&quot;&gt;
                      &lt;img src={imageURL} alt={img.alt} /&gt;
                          &lt;div className=&quot;gallery-img-overlay&quot;&gt;
                            &lt;div className=&quot;gallery-content&quot;&gt;
                              &lt;div className=&quot;info&quot;&gt;
                                &lt;h6&gt;{name}&lt;/h6&gt;
                              &lt;/div&gt;
                              &lt;a href={imageURL} className=&quot;popimg&quot;&gt;  
                                &lt;span className=&quot;icon&quot;&gt;
                                  &lt;i className=&quot;icofont-picture&quot; /&gt;
                                &lt;/span&gt;
                              &lt;/a&gt;
                            &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/Col&gt;
          })
              return imgs;
         });    
  
      return (  &lt;div className=&quot;gallery-container&quot;&gt;
                    {medias}
                  &lt;/div&gt;
        
      );
    }
  }
  
  export default Image;
  </code></pre>
  <p><strong>fetch(API_URL + 'listgallery') :</strong>``</p>
  <pre><code>[
      {
          &quot;name&quot;: &quot;Break&quot;
      },
      {
          &quot;name&quot;: &quot;Lunch&quot;
      },
      {
          &quot;name&quot;: &quot;Dinner&quot;
      },
      {
          &quot;name&quot;: &quot;Dessert&quot;
      }
  ]
  </code></pre>
  <p><strong>fetch(API_URL + 'gallery') :</strong>``</p>
  <pre><code>[
      {
          &quot;name&quot;: &quot;Break&quot;,
          &quot;Medias&quot;: [
              {
                  &quot;image&quot;: &quot;gallery-2.jpg&quot;,
                  &quot;alt&quot;: &quot;gallery-2&quot;,
                  &quot;gallerie_as_media&quot;: {
                      &quot;galleryId&quot;: 1,
                      &quot;mediaId&quot;: 2
                  }
              },
              {
                  &quot;image&quot;: &quot;gallery-4.jpg&quot;,
                  &quot;alt&quot;: &quot;gallery-4&quot;,
                  &quot;gallerie_as_media&quot;: {
                      &quot;galleryId&quot;: 1,
                      &quot;mediaId&quot;: 4
                  }
              },
              {
                  &quot;image&quot;: &quot;gallery-5.jpg&quot;,
                  &quot;alt&quot;: &quot;gallery-5&quot;,
                  &quot;gallerie_as_media&quot;: {
                      &quot;galleryId&quot;: 1,
                      &quot;mediaId&quot;: 5
                  }
              },
              {
                  &quot;image&quot;: &quot;gallery-6.jpg&quot;,
                  &quot;alt&quot;: &quot;gallery-6&quot;,
                  &quot;gallerie_as_media&quot;: {
                      &quot;galleryId&quot;: 1,
                      &quot;mediaId&quot;: 6
                  }
              }
          ]
      },
      {
          &quot;name&quot;: &quot;Lunch&quot;,
          &quot;Medias&quot;: [
              {
                  &quot;image&quot;: &quot;gallery-1.jpg&quot;,
                  &quot;alt&quot;: &quot;gallery-1&quot;,
                  &quot;gallerie_as_media&quot;: {
                      &quot;galleryId&quot;: 2,
                      &quot;mediaId&quot;: 1
                  }
              },
              {
                  &quot;image&quot;: &quot;gallery-3.jpg&quot;,
                  &quot;alt&quot;: &quot;gallery-3&quot;,
                  &quot;gallerie_as_media&quot;: {
                      &quot;galleryId&quot;: 2,
                      &quot;mediaId&quot;: 3
                  }
              },
              {
                  &quot;image&quot;: &quot;gallery-4.jpg&quot;,
                  &quot;alt&quot;: &quot;gallery-4&quot;,
                  &quot;gallerie_as_media&quot;: {
                      &quot;galleryId&quot;: 2,
                      &quot;mediaId&quot;: 4
                  }
              }
          ]
      },
      {
          &quot;name&quot;: &quot;Dinner&quot;,
          &quot;Medias&quot;: [
              {
                  &quot;image&quot;: &quot;gallery-2.jpg&quot;,
                  &quot;alt&quot;: &quot;gallery-2&quot;,
                  &quot;gallerie_as_media&quot;: {
                      &quot;galleryId&quot;: 3,
                      &quot;mediaId&quot;: 2
                  }
              },
              {
                  &quot;image&quot;: &quot;gallery-5.jpg&quot;,
                  &quot;alt&quot;: &quot;gallery-5&quot;,
                  &quot;gallerie_as_media&quot;: {
                      &quot;galleryId&quot;: 3,
                      &quot;mediaId&quot;: 5
                  }
              },
              {
                  &quot;image&quot;: &quot;gallery-6.jpg&quot;,
                  &quot;alt&quot;: &quot;gallery-6&quot;,
                  &quot;gallerie_as_media&quot;: {
                      &quot;galleryId&quot;: 3,
                      &quot;mediaId&quot;: 6
                  }
              }
          ]
      },
      {
          &quot;name&quot;: &quot;Dessert&quot;,
          &quot;Medias&quot;: [
              {
                  &quot;image&quot;: &quot;gallery-1.jpg&quot;,
                  &quot;alt&quot;: &quot;gallery-1&quot;,
                  &quot;gallerie_as_media&quot;: {
                      &quot;galleryId&quot;: 4,
                      &quot;mediaId&quot;: 1
                  }
              },
              {
                  &quot;image&quot;: &quot;gallery-3.jpg&quot;,
                  &quot;alt&quot;: &quot;gallery-3&quot;,
                  &quot;gallerie_as_media&quot;: {
                      &quot;galleryId&quot;: 4,
                      &quot;mediaId&quot;: 3
                  }
              },
              {
                  &quot;image&quot;: &quot;gallery-4.jpg&quot;,
                  &quot;alt&quot;: &quot;gallery-4&quot;,
                  &quot;gallerie_as_media&quot;: {
                      &quot;galleryId&quot;: 4,
                      &quot;mediaId&quot;: 4
                  }
              },
              {
                  &quot;image&quot;: &quot;gallery-5.jpg&quot;,
                  &quot;alt&quot;: &quot;gallery-5&quot;,
                  &quot;gallerie_as_media&quot;: {
                      &quot;galleryId&quot;: 4,
                      &quot;mediaId&quot;: 5
                  }
              },
              {
                  &quot;image&quot;: &quot;gallery-6.jpg&quot;,
                  &quot;alt&quot;: &quot;gallery-6&quot;,
                  &quot;gallerie_as_media&quot;: {
                      &quot;galleryId&quot;: 4,
                      &quot;mediaId&quot;: 6
                  }
              }
          ]
      }
  ]
  </code></pre>
  <p><a href="https://i.stack.imgur.com/Tx9Yd.jpg" rel="nofollow noreferrer">Incorrect display and buttons do not work, forced to press F5 several times to force display correctly (See this screenshot)</a></p>
  <p>There must be something wrong with the display, I think the DOM loads too empty before the API responds, or the API mapping is wrong.
  I am not an expert in React, I only started for 1 month on React.</p>
  <p>If you can help me solve this problem?</p>
  <p>I searched for several days on Google, stackoverflow, Github but I can not find anything as a clue.</p>
  <p>On the other hand, the version of magnific-popup and isotope.pkgd.min.js seem not to exist for the last version of React, I put them in &quot;assets / js&quot;</p>
  <p>But I don't think it's isotope and magnific-popup that are responsible for the bad display and the filter malfunction and galerie, because when the gallery and the filters are hard-coded with react, they work without having to simultaneously press F5 several times.</p>
  <p>Thank you for your help.</p>
  <p>Best Regards !</p>