mapping from another component Reactjs-CodePudding

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?

CodePudding user response：

First I don't see flex-direction: row in .container. And I would recommend you to create a wrapper instead of empty tag, because your key={i} won't work on <Image /> (you can set you key only on top component)

CodePudding user response：

I think the width of the container is so small, It just 22% and your image has size 500x500. You can try width: 100% or width: 100vw