The getAttribute function is not always retrieving the attribute value

Question

This is the test I made in a sandbox.

If you run the code and click the 2 buttons like this: first, back, first, back ... a few times you will see at the console that the name attribute of the target event becomes null even if it was not null the first time I pressed that button.

I also attached an image with some comments in the lower right corner to clarify the behaviour.

This is the code:

  handleSearchChange(event) {
    const target = event.target;
    const name = target.getAttribute("name");
    console.log("Test name " + name + "\n");
  }
  render() {
    return (
      <div>
        <div style={{ height: "30px", width: "30px" }}>
          <FirstSVG name="first_page" onClick={this.handleSearchChange} />
        </div>
        <div style={{ height: "30px", width: "30px" }}>
          <BackSVG name="back_page" onClick={this.handleSearchChange} />
        </div>
      </div>
    );
  }

Sometimes your clicks are registering on elements within the SVG and those elements don't have the name attribute. I'd recommend using semantic HTML (like a button with an onClick event), instead assigning of an onClick event to the SVG with a name attribute: [see console](https://i.imgur.com/9PLXWAP.png) — Matt Carlotta, Nov 21 '22 at 03:40

score 2 · Accepted Answer · answered Nov 21 '22 at 03:44

The <svg> element will only be the target if it's the innermost item clicked on. If you click on the <path> part of the SVG, for example, that'll be the target instead.

While you could fix it by using event.currentTarget instead - which will reference the element the listener was attached to instead of the element the event was dispatched to - since this is React, a much better approach would be not to pass information through the DOM at all, and to instead convey it through JavaScript alone.

For example, you could have something like:

  makeHandler(name) {
    return () => {
      console.log(name);
    };
  }
  render() {
    return (
      <div>
        <div style={{ height: "30px", width: "30px" }}>
          <FirstSVG onClick={makeHandler("first_page")} />
        </div>
        <div style={{ height: "30px", width: "30px" }}>
          <BackSVG onClick={makeHandler("back_page")} />
        </div>
      </div>
    );
  }

score 2 · Answer 2 · answered Nov 21 '22 at 03:44

The target property refers to the dom element on which the event originated so you have to use currentTarget just like this:

handleSearchChange(event) {
    const target = event.currentTarget;
    const name = target.getAttribute("name");
    console.log("Test name " + name + "\n");
}

if you would like to know more about difference between target and currentTarget see this here or here

The getAttribute function is not always retrieving the attribute value

2 Answers2