Utilize the Material UI grid in a horizontal orientation mapping

Question

Utilize the Material UI grid in a horizontal orientation mapping

I have implemented a Card Grid using Material UI's Grid and Card components.

Below is the code I used :

class CardList extends React.Component {


  render() {
    const cardComponent = CardSeed.cards.map((card) => (
      <Card
        className="cards"
        key={'card-' + card.id}
        id={card.id}
        header={card.header}
        title={card.title}
        category={card.category}
        summary={card.summary}
      />
    ));
    return (
      <Grid direction="row" container spacing={4}>
        <Grid item xs={1}>
          {cardComponent}
        </Grid>
      </Grid>
    );
  }
}

export default CardList;

I am puzzled as to why the grid is displaying vertically instead of horizontally when using the map function, whereas it displays horizontally without it.

reactjs material-ui

Answer 1

Answer №1

Make sure to include the Card component within each Grid item component, rather than nesting cards inside a grid item.

const CardComponent extends React.Component {
  const { card } = this.props;

  render() {
    return (
      <Card
        className="cards"
        id={card.id}
        header={card.header}
        title={card.title}
        category={card.category}
        summary={card.summary}
      />
    );
  };
};

class CardList extends React.Component {
  render() {
    return (
      <Grid container spacing={4}>
        {
          CardSeed.cards.map((card, i) => (
            <Grid key={'card-' + card.id} item xs={1}>
              <CardComponent card={card} />
            </Grid>
          ))
        }
      </Grid>
    );
  }
}

export default CardList;

Avoid passing the direction="row" props as it is already the default for a Grid component.

For more details, refer to the guide: https://mui.com/api/grid/

Answer 2

Make sure to include the Card component within each Grid item component, rather than nesting cards inside a grid item.

const CardComponent extends React.Component {
  const { card } = this.props;

  render() {
    return (
      <Card
        className="cards"
        id={card.id}
        header={card.header}
        title={card.title}
        category={card.category}
        summary={card.summary}
      />
    );
  };
};

class CardList extends React.Component {
  render() {
    return (
      <Grid container spacing={4}>
        {
          CardSeed.cards.map((card, i) => (
            <Grid key={'card-' + card.id} item xs={1}>
              <CardComponent card={card} />
            </Grid>
          ))
        }
      </Grid>
    );
  }
}

export default CardList;

Avoid passing the direction="row" props as it is already the default for a Grid component.

For more details, refer to the guide: https://mui.com/api/grid/

Utilize the Material UI grid in a horizontal orientation mapping

Answer №1

Similar questions

Can SKIP_FLIGHT_CHECK=true and openssl-legacy-provider be safely utilized in a React script when running npm start?

What is the best way to incorporate the chosen value into an array?

Integrate the retrieved information into a new object and then proceed to export it

Day Change Triggers React [Native] View Update

Using the map method in JavaScript, merge two separate arrays to create a new array

Encountering a client component error with the app router in Next.js version 13.4.9

Form-linked Progress Bar

Encountering a "Cannot GET /" error message

Tips for featuring the latest blog post at the top of a NextJS blog

Having trouble importing Material UI and working with ClickAwayListener

A function that generates a table by rendering multiple arrays conveniently includes placeholders for empty data cells

Does NextJs have a feature or function similar to the createRef() hook found in traditional ReactJs?

When the Express API sends back a random number, Axios and React repeatedly call the API

Leveraging the Spread Operator in Redux mapDispatchToProps with SweetAlert2

Ways to link my frontend to a NodeJS backend that is publicly deployed rather than on localhost

Elevate state in React to modify classNames of child elements

What is the reason behind the delayed mutation of the state when invoking the setState method in React?

Render images conditionally as background elements for the body, ensuring they do not increase the height of pages with minimal content

Is it possible for a button to simultaneously redirect and execute a function using asynchronous JavaScript?

MUI Material. Unique variant that respects style and color scheme guidelines