what's wrong in this react-bootstrap carousel component?

Question

I am trying to create a carousel by react-bootstrap and i have a problem rendering it on my page:

This is part of my code:

this.slides.map((slide, index) => ({
    <Carousel.Item >
       <Row className="item-container carousel-item d-flex flex-xl-column flex-wrap">
          {
            slide.map(category => { // slide is not defined
               return (                                            
                 <Col className="px-2 category__card" xl={category.xl} md={category.md}>
                   <Card className="p-2" style={category.style}>
                       <Card.Body>
                         <Card.Title className="text-white font-weight-normal text-uppercase ">
                           <h4>
                              category.title}
                           </h4>
                         </Card.Title>
                         <Button variant="light rounded-0" >View Products</Button>    
                      </Card.Body>
                      <div className="card-image-cont">
                         <Card.Img  src={category.img} className="card-image"/>
                      </div> 
                   </Card>  
                 </Col>
              );
            })
          }
       </Row>
    </Carousel.Item> 
 }))

You can imagine data is like this:

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;"
       }
    }
 ]

]

I get this error slide is not defined, what's wrong i am doing here? i am looping through each item in slides 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 JSX

N'Bayramberdiyev · Accepted Answer · 2020-05-20 05:59:59Z

Your code has at least 2 problems.

The first one is that there is an extra bracket: this.slides.map((slide, index) => ({ ... })) should be this.slides.map((slide, index) => { ... }).

And the second one is that you return nothing in your outer map() function: this.slides.map((slide, index) => { ... }) should be this.slides.map((slide, index) => { return ( ... ) }). As a result (assuming that your whole code is wrapped in return() method), your code will look like this:

this.slides.map((slide, index) => {
    return (
     <Carousel.Item>
       <Row className="item-container carousel-item d-flex flex-xl-column flex-wrap">
          {
            slide.map(category => { // slide is not defined
               return (                                            
                 <Col className="px-2 category__card" xl={category.xl} md={category.md}>
                   <Card className="p-2" style={category.style}>
                       <Card.Body>
                         <Card.Title className="text-white font-weight-normal text-uppercase ">
                           <h4>
                              category.title}
                           </h4>
                         </Card.Title>
                         <Button variant="light rounded-0" >View Products</Button>    
                      </Card.Body>
                      <div className="card-image-cont">
                         <Card.Img  src={category.img} className="card-image"/>
                      </div> 
                   </Card>  
                 </Col>
              );
            })
          }
       </Row>
    </Carousel.Item> 
)})

Here is a simple example based on your code. Hope this helps you.

Collectives™ on Stack Overflow

what's wrong in this react-bootstrap carousel component?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related