icon inside button does not trigger attached function on React - html

Question

I am building app on React. I have a table of item list and have difficult invoking function on icon.
deleteItem = event => {
this.props.deleteRecord(event);
};
const RecordList = records.map(({ category, task, duration, id }, i) => (
<tr className="record-item" key={i} id={id}>
<td>
<span className="recordItem">{category}</span>
</td>
<td>
<span>{task}</span>
</td>
<td className="time-trashIcon-container">
<span>{duration}</span>
<button
type="button"
className="trashIcon"
id={id}
onClick={this.deleteItem}
>
<i className="far fa-trash-alt" />
</button>
</td>
</tr>
));
What I want to achieve
when user clicks the trash button (icon inside button tag), it calls a function to delete item.
Problem
For now, only when I click button padding, not icon itself triggers delete function. Clicking icon does not trigger anything.
What I tried
I wrap the icon inside span and tried giving delete function as onClick eventListener. It would trigger a function but it fails to find property I want to pass id of each item which I need to delete the target item.
I don't want to use jQuery. I have tried data-x to pass property and did not work either. Any help would be appreciated.
Thank you tons in advance.

Answer 1

Put it inside button. using below syntax you need not to bind if you are using ES6
onClick={e => this.deleteItem(id, e)}
write your delete code inside.
deleteItem(id, event) {
//TO-DO delete code
}
Instead of using button you can use <a>
<a className="trashIcon"
id={id}
onClick={e => this.deleteItem(id, e)}/> <i className="far fa-trash-alt"/></a>

Answer 2

Answering my own question for anyone who might have a similar problem :)
After trying a few things out below...
<a id={id} onClick={this.delete}>
<button id={id} onClick={this.delete}><a id={id} onClick={this.delete}><i className='trashIcon'></a></button>
<button id={id} onClick={this.delete}><span id={id} onClick={this.delete}><i className='trashIcon'></span></button>
All of them invoke delete function when clicking padding of icon, not the icon itself.
The working code was just to put <span><i/><span>