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

  return (
    <div className={classes.root}>
      <GridList className={classes.gridList} cols={2.5}>
        {tileData.map(tile => (
          <GridListTile key={tile.img}>
            <img src={tile.img} alt={tile.title} />
            <GridListTileBar
              title={tile.title}
              classes={{
                root: classes.titleBar,
                title: classes.title,
              }}
              actionIcon={
                <IconButton>
                  <StarBorderIcon className={classes.title} />
                </IconButton>
              }
            />
          </GridListTile>
        ))}
      </GridList>
    </div>
  );
}
function SingleLineGridList() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <GridList className={classes.gridList} cols={2.5}>
        {tileData.map(tile => (
          <GridListTile key={tile.img}>
            <img src={tile.img} alt={tile.title} />
            <GridListTileBar
              title={tile.title}
              classes={{
                root: classes.titleBar,
                title: classes.title,
              }}
              actionIcon={
                <IconButton>
                  <StarBorderIcon className={classes.title} />
                </IconButton>
              }
            />
          </GridListTile>
        ))}
      </GridList>
    </div>
  );
}
function SingleLineGridList ( ) { const classes = useStyles ( ) ; return ( < div className = { classes . root } > < GridList className = { classes . gridList } cols = { 2.5 } > { tileData . map ( tile => ( < GridListTile key = { tile . img } > < img src = { tile . img } alt = { tile . title } / > < GridListTileBar title = { tile . title } classes = { { root : classes . titleBar , title : classes . title , } } actionIcon = { < IconButton > < StarBorderIcon className = { classes . title } / > < / IconButton > } / > < / 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',
},
{
[etc...]
},
];
The example data is structured as follows :
SingleLineGridList - GridList