I have created an array data for (title,desc,images,etc…) from one component and want to mapping in another component:
return (
<div className={styles.container}>
{data.map((pizza, i) => (
<>
<Image src={pizza.imgSrc} key={i} alt="" width="500" height="500" />
<h1 className={styles.title}>{pizza.title}</h1>
<span className={styles.price}>{pizza.price}</span>
<p className={styles.desc}>
{pizza.desc}
</p>
</>
))}
</div>
);
my container CSS:
.container {
width: 22%;
padding: 20px 40px;
display: flex;
align-items: center;
justify-content: center;
}
It is rendering only flex-direction: column, I want to render ‘row’ but nothing happen.
Can someone help me?