CODEWITHSUNDEEP
reactjsmaterial-ui
ziwdig44bugs
ziwdig44bugs

Reputation: 177

Map material UI grid horizantally

I am using material UI Grid and Card to create a Card Grid.

Here is my code :

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 wondering why the grid is rendering vertically and not horizontally, without the map function the grid is rendered Horizontally.

Upvotes: 1

Views: 678

Answers (1)

hotcakedev
hotcakedev

Reputation: 2515

You should wrap the Card component in each Grid item component rather than wrapping 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;

You don't need to pass direction="row" props since it is a default props for a Grid component.

Please have a look at the guide. https://mui.com/api/grid/

Upvotes: 1

Related Questions