Office Fabric UI - onClick IconButton does not working when I Package-Solution

Question

I have the following table:

Rows are drawn in a dynamic way and also the buttons to delete each row.

<span className="ms-Table-cell">
  <div>
    <IconButton
      onClick= { this._removeItemFromDetail }
      id={ detail.Id.toString() }
      iconProps={ { iconName: 'Cancel' } }
      title='Delete' />
  </div>  
</span>

private _removeItemFromDetail(e) {
    console.log("e.target",e.target);
}

The issue is that every time I click on a delete button in console it shows me:

So, I can't access to Button Id Property, but this only happens when I have published the Webpart. Does anyone know how it can be fixed?

Thank you!

Answer 1

In the onClick of the IconButton you could write the following;

onClick={() => {this._removeItemFromDetail(detail.Id)}}

This should allow you to accept an ID as a parameter. If you still need the "event" in the _removeItemFromDetail method you can add it as follows;

onClick={(event) => {this._removeItemFromDetail(event, detail.Id)}}

which would mean your method would look like this;

private _removeItemFromDetail(event, itemId) {
    console.log("itemId: " + itemId); 
}