I am facing a challenge with Material-UI Grid. I want to display the information from my map function in two columns instead of one. I tried adding another Grid item sm={6} and using the same map function, which resulted in two columns but with identical information. How can I break the grid into two separate columns when iterating through data with just one 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 direction='row' container spacing={1}>
<Grid item sm={6}>
{previewData.slice(0, visible).map(renderData)}
</Grid>
</Grid>
<Container className={classes.extendButtonArea}>
{visible < previewData.length && (
<Button className={classes.extendButton} onClick={loadMore}>
View More...
</Button>
)}
</Container>
</div>
)
}
Any assistance is much appreciated as I seem to be stuck in a loop, confusing myself even more. Thank you in advance!