How can I sort results in a row?

Question

I'm trying to show my results in three rows side by side in React/JavaScript using flexbox. As I only have one CardItem I cannot copy and paste it three times as it would be showing the same result in a row. Is there any way to show my results in a row without copying and pasting the same card?

Code Below:

  return (
          <div className="cards">
            <div className="cards__container">
              <div className="cards__wrapper">
                <ul className="cards__items">
                  <CardItem
                    src={restaurant.imageURL}
                    restaurantName={restaurant.name}
                    openingHours={restaurant.openingHours}
                    vibes={restaurant.vibes}
                    cuisine={restaurant.cuisine}
                    location={restaurant.area}
                    address={restaurant.address}
                    phone={restaurant.phone}
                  />
                </ul>
              </div>
            </div>
          </div>
        );

And CSS

.cards {
  padding: 2rem;
  background: #fff;
}

h1 {
  text-align: center;
}
.cards__container {
  display: flex;
  flex-flow: row-reverse nowrap; 
  max-width: 1120px;
  width: 90%;
  margin: 0 auto;

  justify-content: center;
  
}

.cards__wrapper {
  position: relative;
  margin: 30px 0 45px;
  flex-flow: row-reverse nowrap; 

}

.cards__items {
  margin-bottom: 24px;
  
}

.cards__item {
  display: flex;
  flex-flow: row-reverse nowrap; 
  /* margin: 0 1rem; */
  border-radius: 10px;
  width: 300px;
}

.cards__item__link {
  /* display: flex; */
  /* flex: 1 1 30%; */
  flex-flow: row-reverse wrap;
  width: 100%;
  box-shadow: 0 6px 20px rgba(56, 125, 255, 0.17);
  -webkit-filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017));
  filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017));
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
}

.cards__item__pic-wrap {
  position: relative;
  width: 100%;
  padding-top: 67%;
  overflow: hidden;
}

.cards__item__pic-location {
  position: relative;
  width: 100%;
  padding-top: 67%;
  overflow: hidden;
}

Currently it looks like this:

Answer 1

      const resturants = [{...}, {...}] // Restaurant Object Array
    
      const CardItem = ({restaurant}) => {
        // Implementation
      }
          
      return (
        <div>
          {resturants.forEach(item => (<CardItem restaurant={item}>))}
        </div>
      )

Sorting the resturants array will change the rendering order

Answer 2

Make a separate component for your CardItem and use it wherever you want.

    const cardComponent = (props) => {
           //your cardItem here
    }

Now use them as

{cardComponent()}

Prefer this article for better understanding.