Why doesn't e.target.dataset always work?

Question

JavaScript

I have this code in render

<a title={title} key={keyVal} onClick={this.onClick} type="button" className={`control-structure pull-right ${className}`}>
        <i data-key={keyVal} data-value={valueVal} data-level={level} className={`fa ${parentClassName}`} aria-hidden="true"/>
      </a>

and here is the onClick event itself

onClick(e) {
    e.preventDefault();
    console.log( e.target.dataset.level);
  }

bind to the event I'm doing in the constructor.
the point is that dataset does not always pull data. In 10% of cases, there is a miss, i.e. the console displays undefined, although there are parameters in the data-level. How can this problem be solved? Or maybe there is an alternative way to pass parameters

Answer 1

You have a click on a link, but data-*on an element <i>
When you click on a link - e.target = link and it doesn't exist data-*
When you click on i = all is well.