CODEWITHSUNDEEP
javascriptcssreactjsmaterial-ui
GaramMoSalah
GaramMoSalah

Reputation: 181

Material UI Grid width shrinks on every re-render

I am trying to render a list of 25 words on a 5x5 grid using the MUI Grid component. The 5x5 grid itself is a <Grid container direction="column"> containing five <Grid item>. Within each of those five <Grid item> is the following structure:

<Grid container direction = "row">
  <Grid item xs={2} key={1}>
    <Paper>
      <Typography> word </Typography>
    </Paper>
  <Grid>
  <Grid item xs={2} key={2}>
    ...
  </Grid>
  ...
  <Grid item xs={2} key={5}>
    ...
  </Grid>
</Grid>

It renders as expected initially. However, whenever the component re-renders, the width of the grid decreases bit-by-bit on each re-render.

I've recreated the issue here:

Edit MUI Grid Shrink Bug

Upvotes: 0

Views: 2353

Answers (1)

Arnab
Arnab

Reputation: 961

You <Grid item> has no size defined. Set size accordingly :

Example

<Grid container direction = "row">
  <Grid item  xs={12} sm={6} md={3} lg={3} xl={2}>
    <Paper>
      <Typography> word </Typography>
    </Paper>
  <Grid>
</Grid>

Also there is no prop for Grid like key. Its a attribute for React to identify component in a map function. It has nothing to do with material UI

Updated

From

<Grid item md={12}>
 <Grid container alignItems="center" justify="center">
   {wordRows}
 </Grid>
</Grid>

To

<Grid item container alignItems="center" justify="center">
   {wordRows}
</Grid>

Upvotes: 1

Related Questions