title: How to pass react-bootstrap carousel items to a Map function?
body: <p>The problem is that it makes three carousels, but it was supposed to make a one, with all three items inside. Everything else is ok. The code also uses react-bootstrap.
  Here's the code:</p>
  <p>Main file:</p>
  <pre><code>import React from &quot;react&quot;;
  import testimonial from &quot;./Testimonial&quot;;
  import Entry from &quot;./Entry&quot;;
  
  function Reviews() {
    return testimonial.map(review =&gt; {
      return (
        &lt;div&gt;
          &lt;Entry
            key={review.id}
            image={review.image}
            content={review.content}
            author={review.author}
          /&gt;
        &lt;/div&gt;
      );
    });
  }
  
  export default Reviews;
  </code></pre>
  <p>Here's the Entry file (the one which is displayed):</p>
  <pre><code>import React from &quot;react&quot;;
  import { Carousel } from &quot;react-bootstrap&quot;;
  
  function Entry(props) {
      return(
          &lt;div&gt;
          &lt;h1 className=&quot;reviews-h1&quot;&gt;Reviews&lt;/h1&gt;
          &lt;Carousel&gt;
            &lt;Carousel.Item&gt;
              &lt;img
                className=&quot;testimonialImages d-block w-50&quot;
                src={props.image}
                alt=&quot;First slide&quot;
              /&gt;
              &lt;Carousel.Caption&gt;
                &lt;h3&gt;{props.author}&lt;/h3&gt;
                &lt;p&gt;{props.content}&lt;/p&gt;
              &lt;/Carousel.Caption&gt;
            &lt;/Carousel.Item&gt;
          &lt;/Carousel&gt;
        &lt;/div&gt;
      );
  }
  
  export default Entry;
  </code></pre>
  <p>And here is the array which has the content to display inside of it:</p>
  <pre><code>const testimonial = [
      {
          id: 1,
          image: &quot;an image url&quot;,
          content: &quot;fake review&quot;,
          author: &quot;john doe&quot;
  
      },
      {
          id: 2,
          image: &quot;an image url&quot;,
          content: &quot;fake review&quot;,
          author: &quot;john doe&quot;
      },
      {
          id: 3,
          image: &quot;an image url&quot;,
          content: &quot;fake review&quot;,
          author: &quot;john doe&quot;
      }
  ]
  
  export default testimonial;
  </code></pre>