Material-UI organizes its Grid Items vertically, creating a column layout rather than a horizontal row

I'm struggling to create a grid with 3 items in each row, but my current grid layout only displays one item per row. Each grid item also contains an image. How can I modify the code to achieve a grid with 3 items in a row? Here's the code snippet:

Grid.js:

const styles = theme => ({

  root: {
    display: "flex",
    flexWrap: "wrap",
    justifyContent: "space-around",
    overflow: "hidden",
    backgroundColor: theme.palette.background.paper,
    margin: 0
  },


  paper: {
    margin: "1%",
    padding: "1%",
    width: "80%"
  },
      });

class GridListings extends Component {
  componentDidMount() {
    this.props.getPosts();
  }

  render() {
    const { classes } = this.props;
    const { posts, loading } = this.props.post;
    let postContent;

    if (posts === null || loading) {
      postContent = <div> loading</div>;
    } else {
      postContent = <PostFeed posts={posts} />;
    }

    return (
      <div className={classes.root}>
        <Paper className={classes.paper}>
          <Typography align="center" variant="display2">
            Sneaker Listings
          </Typography>

          {postContent}
        </Paper>
      </div>
    );
  }
}

postfeed.js:

class PostFeed extends Component {
  render() {
    const { posts } = this.props;

    return posts.map(post => <ListingPost key={post._id} post={post} />);
  }
}

ListingPost.js:

const styles = theme => ({

  root: {
    flexGrow: 1,
    maxWidth: "30%",
    padding: theme.spacing.unit * 2
  },
  image: {
    maxWidth: "100%",
    maxHeight: "100%"
  },
  img: {
    margin: "auto",
    display: "block",
    maxWidth: "100%",
    maxHeight: "100%"
  }
});

class ListingPost extends Component {
  onDeleteClick(id) {
    console.log(id);
  }

  render() {
    const { post, auth, classes } = this.props;

    return (
      <Paper className={classes.root}>
        <Grid container spacing={16} direction="row">
          <Grid item>
            <ButtonBase className={classes.image}>
              <img
                className={classes.img}
                alt="complex"
                src={post.productImage}
              />
            </ButtonBase>
          </Grid>
          <Grid item xs={12} sm container direction="row">
            <Grid item xs container spacing={16}>
              <Grid item xs>
                <Typography gutterBottom variant="subheading">
                  Shoes
                </Typography>
                <Typography gutterBottom>Size:12</Typography>
                <Typography color="textSecondary">Brand New</Typography>
              </Grid>
              <Grid item>
                <Typography style={{ cursor: "pointer" }}>Remove</Typography>
              </Grid>
            </Grid>
            <Grid item>
              <Typography variant="subheading">$19.00</Typography>
            </Grid>
          </Grid>
        </Grid>

      </Paper>
    );
  }
}

Your assistance is greatly appreciated.

Answer №1

To make the component display correctly, make sure to incorporate the bootstrap class row. Here is an example of how you can achieve this:

PostFeed.js

class PostFeed extends Component {
  render() {
    const { posts } = this.props;
    let postss= [];
    posts.map(post => {
      postss.push(<ListingPost key={post._id} post={post} />);
    });
    return (
      <div className="row">
        {postss}
      </div>
    );
  }
}

Alternatively, in your grid.js, ensure that you include a div with the class name row:

<Paper className={classes.paper}>
  <Typography align="center" variant="display2">
    Sneaker Listings
  </Typography>
  <div className="row">
    {postContent}
  </div>
</Paper>

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

Can you provide guidance on the most effective approach to appending to a file using async await?

Is it safe to repeatedly call functions like fs.appendFile()? For instance, when using child_process.spawn and a "for-async-of" loop to implement tee with JavaScript. Chunked file data needs to be appended to a file while performing other processing. If ap ...

What is the best location for implementing role-based authentication in a MeanJS application?

I am working with a meanJS starter template that includes a yeoman generator. I'm trying to figure out where I can add specific permissions to my modules. For example, 'use strict'; // Configuring the Articles module angular.module(' ...

What is the best way to add an additional property based on a child property with React.cloneElement()?

How can I dynamically add a prop to the first child with the type scan in order to enable autofocus on the initial scan component that gets rendered? My current code looks like this: import React, { cloneElement } from 'react'; export default ...

Unlocking Iframe Mode in CKEditor 4

I've encountered a difference between CKEditor 3 and CKEditor 4. In CKEditor 3, when I call the method CKEDITOR.replace('#textAreaId'), it wraps the editor in an iframe. However, in CKEditor 4, when I call the same method (not inline), the i ...

What is the best way to add a new item to an object using its index value?

Can the Locations object have a new property added to it? The property to be added is: 2:{ name: "Japan", lat: 36, lng: 138, description: 'default', color: 'default', url: 'default' } The current Location ...

Hiding the original shape with ClipPath in d3 ReactJS

Currently diving into the world of D3 and ReactJS, I attempted to clip a circle with a straight line, but struggled to grasp how it functions. Below is the HTML code snippet used to draw an image: <div> <svg xmlns="http://www.w3.org/2000/svg" ...

Using Gmail with Nodemailer is throwing an error: "Cannot add property 'mailer' on a string with value 'SMTP'."

I am facing an issue with sending data from a form to my Gmail account. Whenever I click the submit button, I encounter the same error message repeatedly. Despite researching various problems related to nodemailer, none of them match the specific problem t ...

Ensuring the aspect ratio of images stays consistent within a flexbox using CSS

How can I create a grid of images without any spacing in between them? I want the width to be 100% of the parent element and each column to have the same size, for example, 20%. Using flex takes care of the columns, but I'm struggling with making the ...

Leveraging a specific section of an HTML5 CSS3 Bootstrap template in a separate template

As I create my website using a combination of free templates, I often find myself needing to merge elements from different designs. One specific example is wanting to incorporate the "Client Logo Slider" component from template 2 into my original template. ...

Display modal popup only once the dropdown has been validated, with the validation focusing on criteria other than the dropdown itself

Looking for a way to validate dropdown values. Popup should only show if the dropdown values are selected; otherwise, the popup should remain hidden. Below is the code snippet: <div class="main-search-input-item location"> ...

The dropdown menu is being truncated

I am having an issue with a drop-down menu being cut off by its parent div. When I increase the height of the parent div, the drop-down menu becomes visible. Can someone please assist me? Below is my code snippet: MarkUp <div id="main-navigation" clas ...

"Troubleshooting Image Loading Issues in Next.js: A Guide to Reloading Unresponsive

Hello, I am facing an issue with rendering 300 images from IPFS data. Occasionally, around 3-4 of the images fail to load and result in a 404 error. Even after refreshing the page, these unloaded images remain inaccessible. It seems like they are permanent ...

Is there a way to keep my fixed button at a consistent size while zooming on mobile devices?

There are no definitive answers to the questions regarding this issue. Some suggest stopping zoom altogether, while others recommend setting the width, which may not always solve the problem. I am working on a web application designed for mobile use with ...

Choose a file in React by specifying its path instead of manually picking a file

Is there a way for me to automatically select a file from a specified path into my state variable without having to open a select file dialog? I'm looking for a solution where I can bypass the manual selection process. Any suggestions on how this can ...

Guide to managing AutoComplete {onChange} in MUI version 5 with a personalized hook

Currently, I am utilizing a custom hook that manages the validation and handling of the onChange function. For most components like input, select, and textField, I have no trouble with handling the onChange event using the syntax below: The code snippet ...

Developing an HTML table dynamically with JavaScript and incorporating CRM data

I am currently working on my JavaScript file, attempting to create an HTML table. Within this entity's record list are fields such as contractid, name, and address. var filter = "?$select=*&$filter=_plus_franchisee_value eq " + serviceProviderID ...

The issue at hand is that Redux Persist state fails to persist data fetched from an API using

When fetching an API using axios, the action is triggered after the "persist/REHYDRATE" action, resulting in the message "redux-persist/autoRehydrate: 1 actions were fired before rehydration completed...." If I delete tweets one by one and then refresh my ...

Is there a method we can use to consistently retrieve and utilize props passed to a component, given that using wrapper.props().propname always results in undefined

When using enzyme to test a list component, I am trying to verify if the component renders a list with the same data that was passed through props. import React from 'react'; import { shallow, mount } from 'enzyme'; import renderer fro ...

Challenges associated with utilizing img src in JavaScript

I am facing a simple issue. I have carInfo data retrieved from a JSON file, but I am struggling to correctly parse the img source stored in the variable $imgsrc instead of treating it as a string called "$imgsrc". This data needs to be appended to my HTML ...

Tips for implementing a default font on a website

I've incorporated a unique font into a specific section of my website design, but I'm aware that this particular font may not be available on most of my users' computers. Is there a method to apply this font to selected text without resortin ...