Currently, I am in the process of learning React. I have a file named new_card_component.js that is responsible for displaying data fetched from the data.js file. The issue arises in my AirBnB.js file, where I'm passing the AirbnbApp module to a section called data-container, which has a flex property. However, the card components are not being displayed in a flex layout as expected.
import "../CSS/airbnb.css";
import AirbnbApp from "./airbnbApp";
function AirBnBPage(){
return (
<div>
<NavBar/>
<Hero/>
<section className="data-container">
<AirbnbApp/>
</section>
</div>
)
}
export default AirBnBPage
In my new_card_component.js file:
import { FaStar } from "react-icons/fa6";
import "../CSS/airbnb.css";
function NewCard(prop){
return (
<div className="card-sub">
<img src={prop.mainimage} alt="trainer"/>
<div className="info-group">
<a href="https://"><FaStar/> {prop.rating} ({prop.review})</a>
<p>{prop.country}</p>
</div>
<p>{prop.message}</p>
<div className="info-group">
<p>Available spots : {prop.spots} Price : {prop.cost} $</p>
</div>
</div>
)
}
My CSS file - airbnb.css:
.data-container{
/* background-color: red; */
display: flex;
flex-direction: row;
flex-wrap: wrap;
width:1200px;
margin:0 auto;
align-items: center;
justify-content:flex-start;
}
.card-sub{
margin:25px 0 0;
width:320px;
border:2px solid black;
}
.card-sub img{
width:220px;
height: 300px;
border-radius: 10px;
}
.info-group{
margin-top:10px;
display: flex;
gap:0.7rem;
margin-left:10px;
}
I attempted to apply the display:flex property to the data-container section, but it did not resolve the issue. The card components are still being displayed on separate rows despite having an array with 4 objects in my data.js file, resulting in each card component being shown on its own row.