Is there a way to arrange the outcomes in a single line?

I need help displaying my results in three rows side by side in React/JavaScript using flexbox. Since I only have one CardItem, I can't just copy and paste it three times as it would show the same result in each row. Is there a way to achieve this without duplicating the card?

Check out my 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>
        );

Here's the CSS snippet:

.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; 
  border-radius: 10px;
  width: 300px;
}

.cards__item__link {
  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;
}

Current layout can be seen here: https://i.sstatic.net/dqOUv.jpg

Answer №1

      const foodPlaces = [{...}, {...}] // Food Place Object Array
    
      const DisplayItem = ({place}) => {
        // Functionality
      }
          
      return (
        <div>
          {foodPlaces.forEach(place => (<DisplayItem place={place}>))}
        </div>
      )

Reordering the foodPlaces array will modify the display sequence

Answer №2

Instead of repeating the same code over and over, create a separate component for your CardItem and simply use it wherever you need it.

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

Now easily include them in your project like this:

{cardComponent()}

For a more detailed explanation, check out this informative article.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the world of jQuery and Ajax to retrieve a full HTML framework

I'm a beginner in jQuery and JavaScript programming. While I've managed to use jQuery for my Ajax calls, I'm facing an issue that has me stumped. When making an Ajax call, I'm trying to return a complete HTML structure, specifically a ...

Is there a way to reference a background-image using "<img src>" syntax?

Why won't the background image display? It only displays as an img src. How can I call the background-image correctly? <body> <div id="page" style="background- image:url(https://storage.blob.core.windows.net/name/image.png)"> ...

Creating a WordPress widget that links to a local file

Hey there, I've been attempting to utilize the text widget in order to link to a local file, but unfortunately, it's not working as expected, and I'm unsure of the reason why: Here is what I am using: <a href="file:///D:/" target="_blan ...

Exploring High-Density Mobile Devices with Bootstrap 3 Landscape Mode

After completing my first Bootstrap site using version 3, I noticed a display issue when viewing it on an iPhone 5 or LG G2 in landscape mode due to the pixel density. This was not a problem with the Responsive Grid system I previously used. Although I sp ...

The data type 'string' cannot be assigned to the type 'SystemStyleObject | undefined' in the context of Next.js and Chakra UI

I am currently working on a project that involves Next.js, TypeScript, and Chakra UI. While configuring Button themes in the button.ts file, I encountered an error related to the baseStyle object for properties like borderRadius, color, and border: Type & ...

Expanding to a full width of 100%, images on desktop screens are displayed larger than their original

I am facing a challenge with my three images lined up in a row, each with a width of 323px. In order to make my website responsive, I decided to switch from using width: 323px; to width: 100%;. While this adjustment worked well on mobile devices, I encoun ...

Crafting visually stunning interfaces with Material UI

I'm a beginner in Material Design and I could use some assistance with the following structure. Can anyone guide me on how to create this? https://i.stack.imgur.com/NpiVz.png I've managed to add a text box, but now I'd like to place a label ...

Reset the state of the React Rich Text Editor when the ENTER key is pressed

I want to reset the state of the React Rich Text Editor (https://github.com/sstur/react-rte) when the enter key is pressed. This is how my state is structured: state = { value: RichTextEditor.createEmptyValue() } The RichTextEditor component offers ...

Having trouble accessing the 'root' property for all components in Material-ui v4

After upgrading from Material-UI v3 to v4, I am encountering an error with every component I import: app.js:3581 Uncaught TypeError: Cannot read property 'root' of undefined at Button (app.js:3581) at renderWithHooks (app.js:126202) ...

How can I generate an Xpath for the given element?

I am trying to find the Xpath for the specific name (I1888 - Child 1.1) without using the contains function. Currently, I am using the following xpath: "//span[contains(@class,'TreeTitleRed')][contains(.,'Child 1.1')]", but I would like ...

Handling scroll events in a functional component using React

I'm having trouble understanding why the onScroll function isn't triggering the console.log statement. <table className="table" onScroll={()=>{console.log("Works")}> The console.log just doesn't seem to be exec ...

Using JavaScript to set the value of an input text field in HTML is not functioning as expected

I am a beginner in the programming world and I am facing a minor issue My challenge lies with a form called "fr" that has an input text box labeled "in" and a variable "n" holding the value of "my text". Below is the code snippet: <html> <head&g ...

Steps for effectively incorporating the useEffect hook in your code

It's no surprise that there are numerous questions addressing this issue, but each situation is unique and heavily context-dependent. Applying solutions from others to my own problem in a large React application with complex state has proven to be a c ...

Ways to conceal a Material UI Button

Is it possible to hide this Material UI button conditionally without using conditional rendering, as it messes up the display flex items? I just want to use display none if the user is logged in. <Button variant="contained" ...

How can we initiate an AJAX request in React when a button is clicked?

I'm fairly new to React and I'm experimenting with making an AJAX call triggered by a specific button click. This is how I am currently using the XMLHttpRequest method: getAssessment() { const data = this.data //some request data here co ...

I would like for my element to increase and decrease in size while rotating when the button is clicked

I am trying to create an element that changes its size while spinning when a button is clicked. It seems to be working fine on hover, but not onclick. Here is the code I have: <div class="rec">Rec</div> <button id="button&quo ...

Creating a layout with an image positioned on the left and text on the right within a block using CSS

Can anyone provide guidance on how to design a layout similar to the one shown in this image: https://i.sstatic.net/RYAuA.png? I want the image on the left and text on the right, with responsiveness. Any help would be greatly appreciated. Thank you! < ...

Enhance the TypeScript interface by dynamically appending new fields with specific naming conventions

My interface is structured like this: interface ProjectCostData { purchasePrice: number; propertyValue: number; recentlyDamaged: boolean; } Now I am looking to dynamically create a new interface based on the one above: interface ProjectCostDataWithS ...

Troubleshooting: ngAnimate max-height failing to apply to specific element

Having integrated ngAnimate into a project to enhance animations, I've encountered some unusual behavior with a specific element. Let me provide some context: our website features a shop with categories and products within those categories. I am usin ...

HTML alterations with Ajax experiencing a decrease in efficiency

Here's the issue I'm facing. This method is used to dynamically change my index.html based on whether I am logged in as a user or not. The problem arises when I am connected to the webpage for X milliseconds, during which my index.html displays ...