how to have multiple cards in each Carousel slide react-bootstrap

Question

I'm working with react-bootstrap and I have my data coming from an API and saved in recipes as an array.

I'm trying to have Carousel with react-bootstrap but right now it shows each item on a separate slide, how can I show 3 items on each slide?

this is my code

<div>
      <Wrapper>
      <h3>Breakfast Recipes</h3>
      <Carousel>
        {recipes.map((item,index) => (       
          <Carousel.Item key={index}>
                <Card style={{ width: '18rem' }}>
                <Card.Img variant="top" src={item.photo_location} />
                <Card.Body>
                  <Card.Title>{item.name}</Card.Title>
                  <Button variant="primary">Go somewhere</Button>
                </Card.Body>
              </Card>
        </Carousel.Item>     
        ))}
        </Carousel>
        </Wrapper>
    </div>

I know that to do so I should have 3 <Carousel.Item> tags but I can't figure out how to do it with map

Answer 1

Assuming that the goal is to have 3 cards on each slide, it seems that instead of having 3 <Carousel.Item> , the desired output should probably be to have each <Carousel.Item> containing 3 <Card> .

Perhaps try use reduce on recipes to make an array that groups every 3 recipes to map a <Carousel.Item> for each group, and then nest another map inside to output 3 <Card> .

The below example also added a <div> to wrap the <Card> and place them horizontally. It used bootstrap syntax with assumption that the project also uses bootstrap classes.

But if inline styling is preferred, perhaps change <div className="d-flex justify-content-center"> to <div style={{display:"flex", justifyContent: "center"}}> .

Live demo of the example: stackblitz

A very basic example could be:

// Helper function to group every 3 recipe to a new array
const reduceRecipes = (acc, cur, index) => {
  const groupIndex = Math.floor(index / 3);
  if (!acc[groupIndex]) acc[groupIndex] = [];
  acc[groupIndex].push(cur);
  console.log(acc);
  return acc;
};

return (
  <div>
    <Wrapper>
      <h3>Breakfast Recipes</h3>
      <Carousel>
        {recipes.reduce(reduceRecipes, []).map((item, index) => (
          <Carousel.Item key={index}>
            <div className="d-flex justify-content-center">
              {item.map((item, index) => {
                return (
                  <Card key={index} style={{ width: "18rem" }}>
                    <Card.Img variant="top" src={item.photo_location} />
                    <Card.Body>
                      <Card.Title>{item.name}</Card.Title>
                      <Button variant="primary">Go somewhere</Button>
                    </Card.Body>
                  </Card>
                );
              })}
            </div>
          </Carousel.Item>
        ))}
      </Carousel>
    </Wrapper>
  </div>
);

Some further custom styles should probably be added to make this work better, but hope that this still helps.