Trying to add onclick function on tag but click handle function is undefined

Question

I'm trying to get the value from my <li> tag in render but getting the undefined end result. I changed the code according to the suggested answers and now I got the result null.

handleClick= (e) => {
 console.log(e.target.getAttribute('device'));
}
render() {
      
 let { deviceData } = this.state;  
  return (

    <React.Fragment>
    
    {deviceData.map((result,i) => (
      <li key={i} className="nav-item" onClick= {this.handleClick} device= {result.device_title}>
        <a href="#"  className="nav-link"  >
           <i className="nav-icon fas fa-archway" />
             <p>
      
                {result.device_title}
            </p>
         </a>
      </li>
    ))}
    </React.Fragment>
  
  )
}

Answer 1

You are trying to access the property handleClick on this. However it is not bound to the scope of the constructor. You can either define it with an arrow function which will then be on the scope of the constructor so that it can be callable.

  constructor(props) {
  super(props);


  this.handleClick = this.handleClick.bind(this);
}

You could also directly define it as an arrow function and call the method since arrow functions don't have their own this or arguments binding. Check the Are 'Arrow Functions' and 'Functions' equivalent / exchangeable? question asked here for further information.

handleClick = () => {
 console.log('foo');
}

Answer 2

The thing is, name is not a property for the li tag, since it's not meant to be used with it.
It is an attribute, and you can access it in the following way: e.target.getAttribute('name')

However, please read about which tags this should be used on at MDN or W3Schools.
I will really suggest naming the attribute something else though. :)

Answer 3

It seems that li tag is not receiving the click event. You can verify this by logging e.target before you log the e.target.name.

In addition to that, li tag does not accept name attribute, instead you should use data-name then access this value through e.target.dataset.name.

Read more about data attributes

---

Possible Solution

Use the data-name attribute, disable the pointer events on the anchor (a) tag, and set your li to have cursor: "pointer".

export default class App extends React.Component {
  state = {
    deviceData: [
      {
        device_title: "Device 1"
      },
      {
        device_title: "Device 2"
      }
    ]
  };

  handleClick(e) {
    console.log(e.target.dataset.name);
  }

  render() {
    let { deviceData } = this.state;
    return (
      <ul>
        {deviceData.map((result, i) => (
          <li
            key={i}
            onClick={this.handleClick}
            data-name={result.device_title}
            style={{ cursor: "pointer" }}
          >
            <a href="#" className="nav-link" style={{ pointerEvents: "none" }}>
              <i className="nav-icon fas fa-archway" />
              <p>{result.device_title}</p>
            </a>
          </li>
        ))}
      </ul>
    );
  }
}

Answer 4

The target is the element which was clicked on, not the element to which the event handler is bound. Probably the paragraph is the element receiving the click, not the li element.

Use currentTarget to get the element to which the event was bound.