Here is another issue I can't seem to figure out, had it working in past project, did the exact same thing and nothing.

No matter what I try the event param will not give back the id set in the template. Here is the pertinent code...


<div key={it.value.id} id={it.value.Id} class="slds-m-top_xxx-small slds-m-bottom_x-large list-item" onclick={handleListClick}>

<!-- have also tried -->
<div key={it.value.id} data-id={it.value.Id} class="slds-m-top_xxx-small slds-m-bottom_x-large list-item" onclick={handleListClick}>


handleListClick(event) {
    console.log('bw: id = ' + event.currentTarget.id);
    // output: bw: id = undefined

    // have also tried
    console.log('bw: id = ' + event.currentTarget.dataset.id);
    // output: bw: id = undefined

    //have also tried
    let t = event.currentTarget;
    let idstr = t.getAttribute("id");
    console.log('bw: id = ' + idstr);
    // output: bw: id = null

any time I used data-id I used dataset when trying to retrieve the value.

Also in the inspector on chrome if I look at the element, neither the id nor the data-id shows elements tree. I have spent hours trying to figure this out so any help would be appreciated.

1 Answer 1


The problem with your code is in key attribute you have passed {it.value.id} where as for data-id you have passed {it.value.Id}. Both are different as you have used capital and small i . JavaScript is case sensitive. Check the correct api name for id. Use exactly in your html code.

event.currentTarget.dataset.id or event.target.dataset.id would log the value of data-id.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .