title: To loop over an image folder and display all images using React Js
body: <p>I have been battling this issue. I was able to do this using Javascript but couldn't implement it on React. This is the challenge.</p>
  <p>In JS, I used this code:</p>
  <pre><code>images.forEach((img, idx) =&gt; {
      img.style.backgroundImage = `url(./images/${idx + 1}.jpg)`;
    });
  </code></pre>
  <p>--to iterate over the folder 'images' and display all images in sequence. The idea was to scroll the images horizontally (full JS code below at the end of this description). I have tried to do the same thing on React js but couldn't figure a way out. I'd tried the same code on JSX but didn't work. I needed a single line of code just as JS to iterate and display all images in React js. I would gladly appreciate your solution.</p>
  <p>This is the full JS code:</p>
  <pre><code>    var images = [...document.querySelectorAll(&quot;.img&quot;)];
      var slider = document.querySelector(&quot;.slider&quot;);
      var sliderWidth;
      var imageWidth;
      var current = 0;
      var target = 0;
      var ease = 0.05;
      
     images.forEach((img, idx) =&gt; {
          img.style.backgroundImage = `url(./images/${idx + 1}.jpg)`;
        });
      
        function lerp(start, end, t) {
          return start * (1 - t) + end * t;
        }
      
        function setTransform(el, transform) {
          el.style.transform = transform;
        }
      
      
        function init() {
          sliderWidth = slider.getBoundingClientRect().width;
          imageWidth = sliderWidth / images.length;
          document.body.style.height = `${
            sliderWidth - (window.innerWidth - window.innerHeight)
          }px`;
        }
        window.addEventListener(&quot;resize&quot;, init);
      
        function animate() {
          current = parseFloat(lerp(current, target, ease)).toFixed(2);
          target = window.scrollY;
          setTransform(slider, `translateX(-${current}px)`);
          animateImages();
          requestAnimationFrame(animate);
        }
      
        function animateImages() {
          var ratio = current / imageWidth;
          var intersectionRatioValue;
      
          images.forEach((image, idx) =&gt; {
            intersectionRatioValue = ratio - idx * 0.7;
            setTransform(image, `translateX(${intersectionRatioValue * 70}px)`);
          });
        }
      
        init();
        animate();
  </code></pre>
  <p>How can I loop over the image folder and display all images using React js?</p>