Props Not Being Passed Down To Material Ui Button Text

I have a scenario in my app where I use data attributes on buttons to capture certain contextual information in the modal that is launched by pressing the button. This relies on th

Solution 1:

You want to use currentTarget instead of target.

From https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget:

The currentTarget read-only property of the Event interface identifies the current target for the event, as the event traverses the DOM. It always refers to the element to which the event handler has been attached, as opposed to Event.target, which identifies the element on which the event occurred and which may be its descendant.

Here's a little example that you can use to see the difference in the console logs:

importReactfrom"react";
importButtonfrom"@material-ui/core/Button";

exportdefaultfunctionApp() {
  return (
    <divclassName="App"><Buttondata-test="1"onClick={e => {
          console.log("target", e.target.dataset);
          console.log("currentTarget", e.currentTarget.dataset);
        }}
      >
        Hello
      </Button></div>
  );
}