onClick not propagated

Question

I'm having troubles with creating a simple gallery allowing to print pictures. I constructed the interface. When I click on the print button, I'm not able to propagate event to a function. Funny enough, it always works for just a couple of items in the gallery so that console logs foo. Could you please point me where is the problem? I am using material-ui, tileData is a json with image url etc...

Many thanks!

class Galery extends React.Component {
  state = {
    tileData: tileData
  };
  printThis = tile => {
    console.log("printing tile... " + tile.target.value);
  };

  render() {
    const classes = this.props;
    return (
      <div className={classes.root}>
        <ButtonAppBar />
        <div style={{ marginBottom: 20 }} />

        <Grid container spacing={8}>
          <Grid item xs={10}>
            <GridList
              cellHeight={250}
              cellWidth={250}
              cols={5}
              spacing={4}
              className={classes.gridList}
            >
              {tileData.map(tile => (
                <GridListTile key={tile.img}>
                  <img src={tile.img} alt={tile.title} />

                  <GridListTileBar
                    title={tile.title}
                    subtitle={<span>by: {tile.author}</span>}
                    actionIcon={
                      <IconButton
                        className={classes.icon}
                        value="foo"
                        onClick={this.printThis}
                      >
                        <i className="material-icons md-24 md-light">print</i>
                      </IconButton>
                    }
                    secondActionIcon={
                      <IconButton className={classes.icon}>
                        <i className="material-icons md-24 md-light">delete</i>
                      </IconButton>
                    }
                  />
                </GridListTile>
              ))}
            </GridList>
          </Grid>
          <Grid item xs={2}>
            <div className={classes.stats}>
              <StatsTable />
            </div>
          </Grid>
        </Grid>
      </div>
    );
  }
}

Answer 1

It works for me to access the object id through event.currentTarget as per github answer here https://github.com/mui-org/material-ui/issues/7974#issuecomment-329250974 `

So my implementation is:

printThis = (event) => {
    console.log('printing tile... '+ event.currentTarget.id);
};

<IconButton className={classes.icon} id = {tile.img} onClick={this.printThis}>
                                <i className="material-icons md-24 md-light"  >
                                    print
                                    </i>
                            </IconButton>