CODEWITHSUNDEEP
javascriptnode.jsreactjsreact-bootstrapmern
Eliezer Barbosa
Eliezer Barbosa

Reputation: 13

How to create carousel items based on item count using React-Bootstrap

How can I loop through an array and based on the item count create new <Carousel.Item> and insert a <Card> component inside of it.

Let's say I have the following array with some image sources:

const items = [
   {
     src: 'http://somerandomimage.com'
   },
   {
     src: 'http://somerandomimage.com'
   },
   {
     src: 'http://somerandomimage.com'
   },
   {
     src: 'http://somerandomimage.com'
   }
]

I would like to map through this array and add two <Card> per <Carousel.Item> So each <Carousel.Item> would look like this: 

<Carousel.Item>
   <Row>
        <Col lg="3">
           <Card>
               <Card.Img variant="top" src={item.src}/>
                <Card.Body>
                    <Card.Title>Title</Card.Title>
                    <Card.Text>
                      Nisi voluptate ex enim eiusmod pariatur eiusmod non aute 
                      cupidatat cillum pariatur.
                    </Card.Text>
                 </Card.Body>
           </Card>
       </Col>
       <Col lg="3">
           <Card>
               <Card.Img variant="top" src={item.src}/>
                <Card.Body>
                    <Card.Title>Title</Card.Title>
                    <Card.Text>
                      Nisi voluptate ex enim eiusmod pariatur eiusmod non aute 
                      cupidatat cillum pariatur.
                    </Card.Text>
                 </Card.Body>
           </Card>
       </Col>
  </Row>

Upvotes: 0

Views: 1697

Answers (1)

Prem
Prem

Reputation: 1447

First use array chunk to split that array into smaller chunks.

Array.prototype.chunk = function(size) {
  const result = [];

  while (this.length) {
    result.push(this.splice(0, size));
  }

  return result;
};

Then map that to render 2 <Carousel.Item> with two items in each like below, array chunk will return [[{},{}], [{},{}]]

{items.chunk(2).map((chunk, idx) => (
        <Carousel.Item key={idx} className={idx === 0 ? "active" : ""}>
          <Row>
            {chunk.map((item, idx2) => (
              <Col lg="3" key={idx2}>
                <Card>
                  <Card.Img variant="top" style={{width: "50px"}} src={item.src} />
                  <Card.Body>
                    <Card.Title>Title</Card.Title>
                    <Card.Text>
                      Nisi voluptate ex enim eiusmod pariatur eiusmod non aute
                      cupidatat cillum pariatur.
                    </Card.Text>
                  </Card.Body>
                </Card>
              </Col>
            ))}
          </Row>
        </Carousel.Item>
      ))}

Demo https://codesandbox.io/s/spring-pine-fdtg5?file=/src/App.js

Upvotes: 1

Related Questions