title: what's wrong in this react-bootstrap carousel component?
body: <p>I am trying to create a carousel by react-bootstrap and i have a problem rendering it on my page:</p>
  
  <p>This is part of my code:</p>
  
  <pre><code>this.slides.map((slide, index) =&gt; ({
      &lt;Carousel.Item &gt;
         &lt;Row className="item-container carousel-item d-flex flex-xl-column flex-wrap"&gt;
            {
              slide.map(category =&gt; { // slide is not defined
                 return (                                            
                   &lt;Col className="px-2 category__card" xl={category.xl} md={category.md}&gt;
                     &lt;Card className="p-2" style={category.style}&gt;
                         &lt;Card.Body&gt;
                           &lt;Card.Title className="text-white font-weight-normal text-uppercase "&gt;
                             &lt;h4&gt;
                                category.title}
                             &lt;/h4&gt;
                           &lt;/Card.Title&gt;
                           &lt;Button variant="light rounded-0" &gt;View Products&lt;/Button&gt;    
                        &lt;/Card.Body&gt;
                        &lt;div className="card-image-cont"&gt;
                           &lt;Card.Img  src={category.img} className="card-image"/&gt;
                        &lt;/div&gt; 
                     &lt;/Card&gt;  
                   &lt;/Col&gt;
                );
              })
            }
         &lt;/Row&gt;
      &lt;/Carousel.Item&gt; 
   }))
  </code></pre>
  
  <p>You can imagine data is like this:</p>
  
  <pre><code>slides = [
     [
       {
         title: 'laptops',
         img: images.laptop,
         md: 6,
         xl: 3,
         style: {
           "background": "red",
           "height": "100%"
         }
       },
  
  
      {
  
         title: 'mobiles',
         img: images.mobile,
         md: 6,
         xl: 4,
         style: {
           "background": "#c4dd60",
           "height": "100%",
           "margin-bottom": "0.5em;"
         }
      }
   ],
   [
       {
         title: 'laptops',
         img: images.laptop,
         md: 6,
         xl: 3,
         style: {
           "background": "red",
           "height": "100%"
         }
       },
  
  
      {
  
         title: 'mobiles',
         img: images.mobile,
         md: 6,
         xl: 4,
         style: {
           "background": "#c4dd60",
           "height": "100%",
           "margin-bottom": "0.5em;"
         }
      }
   ]
  
  ]
  </code></pre>
  
  <p>I get this error <code>slide is not defined</code>, what's wrong i am doing here? i am looping through each item in <code>slides</code> to create more than one carousel item 
   and each carousel item should contain multiple categories but do not know why i get this error..may be something i am not understanding about <Strong>JSX </strong></p>