How to make 2 columns with information that is iterated in React using Material-UI

Question

I am making a component using Grid. What I want to happen is that the information shows up in two columns instead of just the one I am getting. I am not sure how to achieve this, I know if I could add another Grid section with another sm={6} that is would populate with two columns, but I don't have another bit of information to put inside another Grid as it is all coming from my map function.

const renderData = (person, picture, index) => {
        return (
            <Paper className={classes.Paper}>
                <img src={person.picture.large} />
            </Paper>
        )
    }
return (
        <div className={classes.sectionContainer}>
            <h3 className={classes.title}>Follow our instagram!</h3>
            <h3 className={classes.title}>@platformdanceshowcase</h3>
            <Grid container spacing={1}>
                {previewData.slice(0, visible).map(renderData)}
            </Grid>
            <Container className={classes.extendButtonArea}>
                {visible < previewData.length && (
                    <Button className={classes.extendButton} onClick={loadMore}>
                        View More...
                    </Button>
                )}
            </Container>
        </div>
    )
}

any help you could provide on this topic would be greatly appreciated as I have spun myself into a corner with this one. Thanks in advance!

Answer 1

Following the doc, Columns are components with the item props. It replace the container props that is used in the Parent.

Example:

<Grid container spacing={1}>
   {previewData.slice(0, visible).map((person, picture, index) => (
      <Grid item key={index}>...</Grid>
   )}
</Grid>

I don't use Material ui so try it.

Src: https://material-ui.com/components/grid/

Answer 2

In the Material UI documentation there's the following example:

<Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
  {Array.from(Array(6)).map((_, index) => (
    <Grid item xs={2} sm={4} md={4} key={index}>
      <Item>xs=2</Item>
    </Grid>
  ))}
</Grid>