CODEWITHSUNDEEP
javareactjsmaterial-ui
Fastaca Girasol
Fastaca Girasol

Reputation: 70

React - Material-UI card using Grid

I am currently working on a project and I am new to Material-UI. I am trying to Align my cards so they break a row after they over flow from screen.

This is my code:

    <div>
            <Grid container spacing={4}
                direction="row"
                justifyContent="space-evenly"
                alignItems="center"
                style={{ minHeight: '80vh' }}
            >
                <Grid item xs={3} sm={6} md={4}  >

                </Grid>
                {this.state.coupons.map(c => <Card2 key={c.id} coupon={c} />)}
            </Grid>
        </div>

While doing it separately with each card I have no issue, The problem comes when I use map function.

What would be the best way to do that.

Upvotes: 0

Views: 2074

Answers (1)

mouafus
mouafus

Reputation: 158

Have you tried this?

<div>
      <Grid container spacing={4}
            direction="row"
            justifyContent="space-evenly"
            alignItems="center"
            style={{ minHeight: '80vh' }}
      >
        {
          this.state.coupons.map(c =>(
              <Grid item xs={3} sm={6} md={4} >
            <Card2 key={c.id} coupon={c} />
          </Grid>
          ))
        }
       
      </Grid>
    </div>

Upvotes: 1

Related Questions