function AdvancedGridList() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <GridList cellHeight={200} spacing={1} className={classes.gridList}>
        {tileData.map(tile => (
          <GridListTile key={tile.img} cols={tile.featured ? 2 : 1} rows={tile.featured ? 2 : 1}>
            <img src={tile.img} alt={tile.title} />
            <GridListTileBar
              title={tile.title}
              titlePosition="top"
              actionIcon={
                <IconButton className={classes.icon}>
                  <StarBorderIcon />
                </IconButton>
              }
              actionPosition="left"
              className={classes.titleBar}
            />
          </GridListTile>
        ))}
      </GridList>
    </div>
  );
}
function AdvancedGridList() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <GridList cellHeight={200} spacing={1} className={classes.gridList}>
        {tileData.map(tile => (
          <GridListTile key={tile.img} cols={tile.featured ? 2 : 1} rows={tile.featured ? 2 : 1}>
            <img src={tile.img} alt={tile.title} />
            <GridListTileBar
              title={tile.title}
              titlePosition="top"
              actionIcon={
                <IconButton className={classes.icon}>
                  <StarBorderIcon />
                </IconButton>
              }
              actionPosition="left"
              className={classes.titleBar}
            />
          </GridListTile>
        ))}
      </GridList>
    </div>
  );
}
function AdvancedGridList ( ) { const classes = useStyles ( ) ; return ( < div className = { classes . root } > < GridList cellHeight = { 200 } spacing = { 1 } className = { classes . gridList } > { tileData . map ( tile => ( < GridListTile key = { tile . img } cols = { tile . featured ? 2 : 1 } rows = { tile . featured ? 2 : 1 } > < img src = { tile . img } alt = { tile . title } / > < GridListTileBar title = { tile . title } titlePosition = "top" actionIcon = { < IconButton className = { classes . icon } > < StarBorderIcon / > < / IconButton > } actionPosition = "left" className = { classes . titleBar } / > < / GridListTile > ) ) } < / GridList > < / div > ) ; }
The example data is structured as follows:

import image from 'path/to/image.jpg';
[etc...]

const tileData = [
{
img: image,
title: 'Image',
author: 'author',
featured: true,
},
{
[etc...]
},
];
The example data is structured as follows :
AdvancedGridList - GridList