title: How to render images dynamically to React Carousel?
body: <p>I'm trying to load images into React Carousel. When I .map through the array of filepaths for my images, I load all the images into one 'slide', but I need them to load into different slides.</p>
  <p>Seen (all four pictures in one slide):</p>
  <hr />
  <p><a href="https://i.stack.imgur.com/t63hm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/t63hm.png" alt="enter image description here" /></a></p>
  <p>Wanted (note the 4 dots at bottom, indicating 4 slides. This example is just hard-coded):</p>
  <hr />
  <p><a href="https://i.stack.imgur.com/XPuqa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XPuqa.png" alt="enter image description here" /></a></p>
  <hr />
  <p>Here's the relevant code. Item.js is the parent and CarouselImages.js is the imported function to parse. There's a lot more to these components but I pared them down to the necessary parts.</p>
  <p>Item.js</p>
  <pre><code>import React from 'react';
  import Carousel from 'react-elastic-carousel'
  import CarouselImages from 'components/DatabaseManager/HelperFunctions/CarouselImages.js'
  import {
      Col,
      Row,
      CarouselItem
  } from 'reactstrap'
  
  
  class Item extends React.Component {
      constructor(props) {
          super(props)
          this.state = {
              activeContent: &quot;item&quot;,
          }
      }
  ..
      render() {
          return (
              &lt;div&gt;
                  &lt;Row&gt;
                      &lt;Col md=&quot;6&quot;&gt;
                          &lt;Carousel itemsToShow={1}&gt;
                              &lt;CarouselImages data={this.props.data} /&gt;
                          &lt;/Carousel&gt;
                      &lt;/Col&gt;
                  &lt;/Row&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default Item;
  </code></pre>
  <p>Hard-coded Item.js that works:</p>
  <pre><code>...
      &lt;Carousel itemsToShow={1}&gt;
          &lt;item&gt;&lt;img src={require(`assets/img/phones/i5BlackScreenFront.jpg`)} alt=&quot;phone&quot; /&gt;&lt;/item&gt;
          &lt;item&gt;&lt;img src={require(`assets/img/phones/i5BlackScreenBack.jpg`)} alt=&quot;phone&quot; /&gt;&lt;/item&gt;
          &lt;item&gt;&lt;img src={require(`assets/img/phones/i5WhiteScreenFront.jpg`)} alt=&quot;phone&quot; /&gt;&lt;/item&gt;
          &lt;item&gt;&lt;img src={require(`assets/img/phones/i5WhiteScreenBack.jpg`)} alt=&quot;phone&quot; /&gt;&lt;/item&gt;
      &lt;/Carousel&gt;
  ...
  </code></pre>
  <p>CarouselImages.js:</p>
  <pre><code>import React from 'react';
  
  export default function CarouselImages({ data }) {
      return (
          data.photoPath.map((image) =&gt; {
              return &lt;item&gt;&lt;img src={require(`assets/img/${image}`)} alt=&quot;phone&quot; /&gt;&lt;/item&gt;
          })
      )
  }
  </code></pre>
  <p>data prop (from API call):</p>
  <pre><code>{
      &quot;photoPath&quot;: [
          &quot;phones/i5BlackScreenFront.jpg&quot;,
          &quot;phones/i5BlackScreenBack.jpg&quot;,
          &quot;phones/i5WhiteScreenFront.jpg&quot;,
          &quot;phones/i5WhiteScreenBack.jpg&quot;
      ]
  }
  </code></pre>