Popular posts

The most recommended way though is to get the data out of the event target, instead of allocating an arrow function.

Because when you do the above, every render creates a new function and assigns it to the onClick prop, thereby putting more pressure on the Garbage Collector.

So let's say you have JSX like below:

<div
    data-id={correspondingDataID}
    onClick={this.handleClick}
    ...
>
    ...
</div>

...your click handler will read the corresponding data from the event target

handleClick = (e) => {
    const data = e.target.dataset.id;
    // Do with data, what you shall...
}