title: Passing the carousel items to a Map function
body: <p>I have a issue regarding how to map items properly into Bootstrap carousel, to this moment I have tried this, but result is one picture below another, not showing as carousel.
  In this project I want to use React with Bootstrap, without using another Carousel packages.</p>
  
  <p><strong>JSX CODE:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>export default class Carousel extends Component {
    render() {
      const slides = data.slides;
      return (
        &lt;div
          id='carouselExampleInterval'
          className='carousel slide'
          data-ride='carousel'
        &gt;
          &lt;div className='carousel-inner'&gt;
            {slides.map((slide, i) =&gt; (
              &lt;div
                key={i}
                active={i === 0}
                className={'carousel item' + this.props.active ? ' active' : ''}
                data-interval='8000'
              &gt;
                &lt;img
                  src={slide.url}
                  className='d-block w-100'
                  alt={slide.title}
                /&gt;
                &lt;div className='carousel-caption d-none d-md-block'&gt;
                  &lt;h5 className=''&gt;{slide.title}&lt;/h5&gt;
                  &lt;p&gt;{slide.subtitle}&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            ))}
          &lt;/div&gt;
  
          &lt;a
            className='carousel-control-prev'
            href='#carouselExampleInterval'
            role='button'
            data-slide='prev'
          &gt;
            &lt;span
              className='carousel-control-prev-icon'
              aria-hidden='true'
            &gt;&lt;/span&gt;
            &lt;span className='sr-only'&gt;Previous&lt;/span&gt;
          &lt;/a&gt;
          &lt;a
            className='carousel-control-next'
            href='#carouselExampleInterval'
            role='button'
            data-slide='next'
          &gt;
            &lt;span
              className='carousel-control-next-icon'
              aria-hidden='true'
            &gt;&lt;/span&gt;
            &lt;span className='sr-only'&gt;Next&lt;/span&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Any ideas as to how to fix this issue?<br>
  Thanks in advance</p>