Material UI Grid width shrinks on every re-render
I am trying to render a list of 25 words on a 5×5 grid using the MUI Grid component. The 5×5 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:
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> 
