Material UI Buttons onclick event targetting MuiButton-label span tags randomly

[siddagra]

The code has rendered a bunch of buttons with perkButtonClicked event handler function, the perkButtonClicked then logs the target event, sadly sometimes MuiButton-label is being targeted instead of the button, I want to retrieve the button's id, how do I do this, please help.

import React, {Component} from "react";
import {cellType, perkList} from "./database";
import {Button} from "@material-ui/core";
import "./PerkTab.css";

class PerkTab extends Component {
	state = {
		selectedPerks: []
	}
	perkButtonClicked(e)
	{
		console.log(e.target)
	}
	printPerkButtons() {
		return perkList.slice(1).map((subPerkList,i) => (
			<div className="perkContainer" key={subPerkList[0].name}>
				{subPerkList.map((perk,j) => (
					<Button key={perk.name} id={String(i+1)+" "+String(j)} variant="contained" color="primary" onClick={this.perkButtonClicked}>{perk.name}</Button>
				))}
			</div>
		));
	}
	render() {
		return (
			<React.Fragment>
				<div className="PerkTab">{this.printPerkButtons()}</div>
			</React.Fragment>
		);
	}
}

export default PerkTab;

[eps1lon]

target works different than currentTarget. See facebook/react#5733 (comment)

[support]

👋 Thanks for using Material-UI!

We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.

For support, please check out https://material-ui.com/getting-started/support/. Thanks!

If you have a question on StackOverflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.