I'm currently developing a component using Grid, and I would like the information to display in two columns instead of just one. I'm having trouble figuring out how to achieve this. I understand that I could potentially add another Grid section with sm={6} to populate two columns, but my data is all coming from a map function, so I don't have additional content to insert into another Grid.
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 assistance on this topic would be much appreciated as I've hit a roadblock. Thank you in advance!