text: import React from 'react';
  import PropTypes from 'prop-types';
  import { withStyles } from '@material-ui/core/styles';
  import GridList from '@material-ui/core/GridList';
  import GridListTile from '@material-ui/core/GridListTile';
  //import tileData from './tileData';
  
  const styles = theme => ({
    root: {
      display: 'flex',
      flexWrap: 'wrap',
      justifyContent: 'space-around',
      overflow: 'hidden',
      backgroundColor: theme.palette.background.paper,
    },
    gridList: {
      width: 500,
      height: 100,
    },
    subheader: {
      width: '100%',
    },
  });
  
  /**
   * The example data is structured as follows:
   *
   * import image from 'path/to/image.jpg';
   * [etc...]
   *
   * const tileData = [
   *   {
   *     img: image,
   *     title: 'Image',
   *     author: 'author',
   *     cols: 2,
   *   },
   *   {
   *     [etc...]
   *   },
   * ];
   */
  function ImageGridList(props) {
    const { classes, galleryImagesJSON, handleGalleryImageClick } = props;
  
    return (
      <div className={classes.root}>
        <GridList cellHeight={160} className={classes.gridList} cols={1}>
          {galleryImagesJSON.map(row => (
            <GridListTile key={row.id} cols={1}>
              <img src={row.full_path} onClick={handleGalleryImageClick}  id={row.id}   />
            </GridListTile>
          ))}
        </GridList>
      </div>
    );
  }
  
  ImageGridList.propTypes = {
    classes: PropTypes.object.isRequired,
  };
  
  export default withStyles(styles)(ImageGridList);