What is the process for programmatically aligning two cards side by side using Material UI in React after retrieving data from an API?

I am currently working with data from an API that I need to display in the format of cards, arranged side by side. To achieve this, I have been using an array and passing the data to components programmatically. You can see the output image and my code below.

My challenge lies in displaying two cards next to each other; right now they stack on top of one another instead.

You can access the code sandbox link here.

The current output I am receiving looks like this: https://i.sstatic.net/AYpnu.jpg

How can I modify the output so that the cards are displayed in a single row?

javascriptcssreactjsmaterial-ui

Answer №1

To modify the layout, consider adding the container attribute to the <Grid > component. Adjust the width breakpoint of the Grid within it from 12xs to a smaller value like 5xs.

return (
    <div className="main">
      <Container className="root-container">
        <Grid className="custom-grid" container spacing={3}>
          {data.map((elem) => (
            <Grid className="content-grid" container item xs={5}>
              <FormRow
                title={elem.title}
                subtitle={elem.subtitle}
                date={elem.date}
              />
            </Grid>
          ))}
        </Grid>
      </Container>
    </div>
  );

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

Creating a flash message following a redirect in AngularJS

Just diving into Angular JS and need some clarification. How can I set a flash message after a redirect? Here's my scenario: I have a form where I save data using an HTTP request. Upon success, I navigate to another page using window.location(). Now, ...

javascriptangularjs

Encountering an error with $mdDialog.alert

I am attempting to activate an Alert Dialog using Angular Material Design. Within my controller, I have: angular.module('KidHubApp') .controller('ActivityCtrl', ['$scope','$meteor', '$stateParams', &apo ...

javascriptangularjsmeteorangular-material

Problem with overlapping content and navigation side bar in Bootstrap 4

Working on a project for my university, I utilized Bootstrap-4 to create various divisions - header, content-top-fat, content-bot-fat, and main-content. I aimed to fix the positioning of the header, content sections, and footer while allowing only the main ...

csstwitter-bootstrapbootstrap-4

I'm having trouble launching the local server because when I try to run npm start, an error occurs. Why

I'm attempting to start a local server using Node.js. I've already run create-react-app and the files have been successfully created in the folder. However, when I try to run npm start, it throws an error. I'm using Debian 9 and encountering ...

node.jslinuxreactjsnpmdebian-stretch

Leverage useSWR with personalized data for a logged-in user

When utilizing SWR to retrieve data for the logged-in user, I am unsure of the correct approach. For example, if I want to access data from the api endpoint api/get/cards specifically for the current user. If I use api/get/cards as the key in SWR, wouldn& ...

reactjsnext.jsswr

Modifying the selected color of DropDownMenu List items

Hey there! I'm currently trying to modify the color of a material-ui element that is selected, but I'm having trouble finding any resources on how to accomplish this. My goal is to switch this pinkish shade to a more soothing blue hue. https://i ...

javascriptreactjsmaterial-uiformsy-material-ui

Combining arrays of JSON Objects and organizing them with Javascript

I have a JSON object containing arrays for different country regions. I am attempting to combine these arrays into a single select dropdown menu. The JSON structure is as follows: "latinamerica": [ "Argentina", "Bolivia", "Brazil", ...

javascriptjqueryjson

Unable to update data from false to true in vue.js

What I'm trying to do is change the data from false to true in order to conditionally render a button when a payment has succeeded. When making an axios call, I receive 'succeeded' as the response in the JSON object and can log it to the con ...

javascriptvue.jsmethodsboolean

Is there a way to use grease/tampermonkey to automatically redirect the current definition from Dictionary.com to Thesaurus.com?

Is there a way to use Greasemonkey or Tampermonkey to automatically open the definition on Dictionary.com at Thesaurus.com, and vice versa, when clicking specific links? (Shown in red) My initial thought is to retrieve the word being searched from the URL ...

javascriptgreasemonkeytampermonkey

Searching for an AngularJS and Bootstrap Dual Listbox Solution

I need a component like this to integrate into my project: https://i.sstatic.net/W3PSB.png I am hoping to add it using npm. However, I have tried some of the examples available but faced issues (encountered exceptions or only found bower instead of npm) ...

javascriptangularjstwitter-bootstrapnpm

Utilizing UTC Time with AngularUI's UI-Date Datepicker

My issue lies with the datepicker using localized time instead of UTC when making calls to the backend. To handle this, I've created a function that adjusts the value before posting it to the server: function adjustDateForTimeOffset(dateToAdjust) ...

javascriptangularjsdatepickerangularjs-directiveangular-ui

Can the keys of an object be retrieved in a specific order?

Is it possible to retrieve keys from a JSON object in the exact same order they were originally received? The use of Object.keys(company).length currently seems to be functioning, but I am seeking reassurance that this method will consistently deliver acc ...

javascriptjson

Angular and Node.js Integration: Compiling Files into a Single File

I have a question, is it possible to include multiple require js files in one file? If so, how can I create objects from them? Calling 'new AllPages.OnePage()' doesn't seem to work. To provide some context, I'm looking for something sim ...

javascriptangularjsnode.jsseleniumprotractor

Refreshing the webpage section without requiring a full page reload

I am currently working on a Django website and I have been trying to update a specific section of the webpage without refreshing the entire page. However, most solutions I found online didn't work for me because the part I want to update is actually i ...

javascriptjqueryhtmlajaxdjango

The Express/Mongoose route consistently modifies the identical item

I'm encountering an issue where any attempt to update or create a new item results in only creating one item and then updating that same item regardless of the input. Is there something incorrect with this route? // @route POST api/item // @desc ...

javascriptnode.jsexpressmongoose

What is preventing the bundling of my CSS into the application?

I'm facing an issue while setting up a new project using vue.js, scss, and webpack (with express.js on the server side and TypeScript). I copied over the configurations from a previous project where everything was working fine. According to my underst ...

javascriptnode.jsvue.jswebpacksass

Clickable MUI Card: Enable full card functionality for mobile devices only, keeping desktop interaction restricted

I'm currently utilizing the MUI card component to construct a layout. When viewing on mobile devices, I want the entire card to be clickable. However, on desktop screens, I prefer to have a button instead and make the card itself non-clickable. Here& ...

reactjsmaterial-ui

Unresponsive CSS styles on a specific DIV element

Here is the HTML code I am currently working with: <body> <section id="info"> <div class="status"> ... I have been attempting to apply styles to the div with a class of 'status' using my CSS file linke ...

htmlcss

Harness the power of JavaScript to generate a dynamic overlay with a see-through image that can be expanded

Within different sections of my website, we display banner ads that are loaded in real-time from third-party sources and come in various sizes. I'm interested in adding a transparent overlay image to each ad which would allow me to trigger a click ev ...

javascriptjquerycss

Aligment issues in columns on Bootstrap 5

I currently have a layout using Bootstrap 5 with multiple rows and columns. My goal is to have the columns aligned within each row, but I am experiencing issues where some borders are not lining up correctly with the columns. .VI-border { border-t ...

htmlcssbootstrap-5