React Boostrap CardDeck does not align horizontally

I am new with React and I am trying to display three cards in a row but they do not align horizontally, they are vertically (from top to bottom). I tried using cardDeck or cardGroup, but they do not work. Below is the code

import { Card, Button } from "react-bootstrap";
import "./Style.scss";

const Item = ({ varietals }) => {
    return (
    <>
        <Card style={{ width: '18rem' }}>
            <Card.Img variant="top" src={varietals.pictureUrl} />
            <Card.Body>
                <Card.Title>{varietals.title}</Card.Title>
                {/* <Card.Text>
                  {varietals.description}
                </Card.Text> */}
                <Button variant="info">Details</Button>
            </Card.Body>
        </Card>        
    </>
    )
};


export default Item;

Also, I did a sass file to import in the code above but it seems it does not work. This is the simple code fo the sass file:

.clem {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
};

In addition, this is the itemList where I do the map of the items:

import Item from "../Item/Item";
    
const ItemList = ({ varietals }) => {
  return (
      <div>    
        {varietals.map((varietals) => {
        return <Item key={varietals.id} varietals={varietals} className="row" />;
        })};  
      </div>
  );
};


  export default ItemList;

Last, this is the itemListContainer where I did the promise:

import { useEffect, useState } from "react";
import ItemList from "../Components/ItemList/ItemList";    

const ItemListContainer = () => {
  
  const [varietals, setVarietals] = useState([])

  useEffect(() => {
  const myPromise = new Promise((resolve, reject) => {
    setTimeout(() => resolve(Aimara), 2000);
  });

  myPromise.then((result) => setVarietals(result));
  }, []);
    return (
        <>
          <ItemList varietals={varietals} />
          <ItemCountComponent stock={5} initial={1}/>
        </>
    )
};

export default ItemListContainer;

I hope someone could solve it. Thanks!

Answer

Apply the class .clem in your ItemList main div like blow. So that It will apply the horizontal row style for your Card Container.

const ItemList = ({ varietals }) => {
   return (
     <div className="clem">    
        {varietals.map((varietals) => {
          return <Item key={varietals.id} varietals={varietals} className="row" />;
        })};  
     </div>
  );
};

Otherwise you can use Card Group for your requirement. But <CardGroup> should not in the repeated section. It should be placed on common where currently we have applied class clem. Refer the details here

Advertisement

Answer