title: Loading dynamic images (fetched using API) in 'react-responsive-carousel' React
body: <p>I really like 'react-responsive-carousel' and it perfectly fits my requirements. </p>
  
  <p>More Details: 
  <a href="https://www.npmjs.com/package/react-responsive-carousel" rel="nofollow noreferrer">https://www.npmjs.com/package/react-responsive-carousel</a></p>
  
  <p>However I realized that the demo examples provided by this uses static images, placed in separate "Carousel.js" file. </p>
  
  <p>In my case, I want to load images in Carousel, that I'm fetching using API at runtime. I don't have any clue about how can I achieve this behavior. </p>
  
  <p>Currently following is the setup of my app:
  <strong>File: Carousel.js</strong></p>
  
  <pre><code>import React from "react";
  import { Carousel } from "react-responsive-carousel";
  
  export default () =&gt; (
    &lt;Carousel autoPlay infiniteLoop='true'&gt;
      &lt;div&gt;
        &lt;img src="http://example.com/image/32.png" /&gt;
        &lt;p className="legend"&gt;Image 1&lt;/p&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;img src="http://example.com/image/34.png" /&gt;
        &lt;p className="legend"&gt;Image 2&lt;/p&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;img src="http://example.com/mockups/image/9.png" /&gt;
        &lt;p className="legend"&gt;Image 3&lt;/p&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;img src="http://example.com/image/32.png" /&gt;
        &lt;p className="legend"&gt;Image 4&lt;/p&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;img src="http://example.com/image/34.png" /&gt;
        &lt;p className="legend"&gt;Image 5&lt;/p&gt;
      &lt;/div&gt;
    &lt;/Carousel&gt;
  );
  </code></pre>
  
  <p>In my <code>App.js</code> file, I am simply using it in the following way:</p>
  
  <pre><code>&lt;div&gt;
  &lt;div className="my-carousel"&gt;
  &lt;Carousel /&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>