Id is returned as undefined onclick event

Question

I am trying to fetch the Id of the record when user clicks on edit, this is little different out of box implementation rather than regular edit functionality in lightning datatable. Using custom datatable where incorporating edit functionality in the column by custom type, so passing record id as typeattribute. I am getting the record id's correctly in the connetedcallback as well as renderedcallback of the custom type column of the custom datatable. But when clicking on the icon in the handleedit call I am not able to capture the id of the record as expected.

Need the value of record id (id of the record row on which the icon exists) when clicked on the edit icon in the datatable.

Below is the code snippet

<lightning-button-icon icon-name="utility:edit"  alternative-text="Edit" title="Edit" variant="container" onclick={handleEdit} key={accountId} id={accountId}>{accountId}</lightning-button-icon>
 
connectedCallback(){
        console.log('connected  ', this.accountId); //getting correct record id
    }
    renderedCallback(){
        console.log('rendered ', this.accountId); //getting correct record id
    }

    handleEdit(event){        
        console.log('event ',event.currentTarget.dataset.id); //getting as undefined and when checked currentTarget in console is returning null.
        console.log('event ', event.target.value); //is also returning undefined.
    }````

Thank you.

Answer 1

In your button, add a new attribute data-id and set it equal to your record ID value. Within your onclick handler, you can consume it without changing any existing code. Full html and js below:

import { LightningElement, wire } from "lwc";
import { getRecords } from "lightning/uiRecordApi";
import ID_FIELD from "@salesforce/schema/Account.Id";
import NAME_FIELD from "@salesforce/schema/Account.Name";
import PHONE_FIELD from "@salesforce/schema/Account.Phone";
export default class Table extends LightningElement {
  error;
  accountRecords = [];
  hasData = false;

  @wire(getRecords, {
    records: [
      {
        recordIds: [
          "0017g00001hzAbYAAU",
          "0017g00001hzAbTAAU",
          "0017g00001hzAbJAAU",
          "0017g00001hzAbEAAU"
        ],
        fields: [ID_FIELD, NAME_FIELD, PHONE_FIELD]
      }
    ]
  })
  wiredRecords({ error, data }) {
    if (data) {
      let dataarray = [];
      data.results.forEach((record) => {
        dataarray.push(record.result.fields);
      });
      this.accountRecords = [...dataarray];
      this.hasData = true;
      this.error = undefined;
    } else if (error) {
      this.error = error;
    }
  }

  handleEdit(event) {
    console.log("event ", event.currentTarget.dataset.id);

  }
}

<template>
  <template lwc:if={hasData}>
    <template for:each={accountRecords} for:item="record">
      <tr key={record.Id.value}>
        <td>
          <lightning-button-icon
            icon-name="utility:edit"
            alternative-text="Edit"
            title="Edit"
            variant="container"
            onclick={handleEdit}
            key={record.Id.value}
            data-id={record.Id.value}
          ></lightning-button-icon>
        </td>
        <td>{record.Name.value}</td>
        <td>{record.Id.value}</td>
        <td>{record.Phone.value}</td>
      </tr>
    </template>
  </template>
</template>