I am using Material UI GridList to display a list of Events in React. Everything is working fine except that I am not able to make Title or Image a Link. Does anyone know how to make Title and Image a Link?

Here is my Component.

```
<div className={classes.root}>
  <GridListTile key="Subheader" style={{ height: "auto" }}>
    <ListSubheader component="div">This is List of Events</ListSubheader>
  </GridListTile>
  <GridList
    cellHeight={330}
    cols={matches ? 1 : 3}
    className={classes.gridList}
    spacing={12}
  >
    {tileData.length > 0 &&
      tileData.map((tile, index) => {
        return (
          <GridListTile
            key={Math.floor(Math.random() * new Date().getTime())}
          >
            <img src={tile.eventImage} alt={tile.title} />
            <GridListTileBar
              title={tile.title}
              subtitle={<span>by: {tile.description}</span>}
              actionIcon={<IconButton title={tile.title} />}
            />
          </GridListTile>
        );
      })}
  </GridList>
</div>
);

```

Update
------

This is an update to the answer that was given below. The first image is now smaller than the rest of the images after update the code with the solution given below.

[![The first image is now smaller than the rest of the images](https://i.stack.imgur.com/yqVH0.jpg)](https://i.stack.imgur.com/yqVH0.jpg)

Here is the new code that I am trying:

```
<div className={classes.root}>
  <GridListTile key="Subheader" style={{ height: "auto" }}>
    <ListSubheader component="div">This is List of Events</ListSubheader>
  </GridListTile>
  <GridList
    cellHeight={330}
    cols={matches ? 1 : 3}
    className={classes.gridList}
    spacing={12}
  >
    {tileData.length > 0 &&
      tileData.map((tile, index) => {
        return (
          <GridListTile
            key={Math.floor(Math.random() * new Date().getTime())}
          >
            <a href={"events/" + tile._id + "/eventcomments"}>
              <img
                src={tile.eventImage}
                alt={tile.title}
                className="MuiGridListTile-imgFullHeight"
              />
              <GridListTileBar title={tile.title} />
            </a>
          </GridListTile>
        );
      })}
  </GridList>
</div>

```