2
<template for:each={fields} for:item="fields">
  <tr class="slds-hint-parent" key={fields.id}>
  <td role="gridcell">
  <div class="slds-truncate">{fields.value1}​</div> 
  </td>
  <th scope="row" tabindex="0">
  <div class="slds-truncate">
  <a style="text-decoration:none; color:blue;" onclick={getDetail}  data-record-id={fields.Id}>{fields.value2}</a>
  </div>
  </th>
  <td role="gridcell">
  <div class="slds-truncate">{fields.value3}</div>
  </td>
  <td role="gridcell">
  <div class="slds-truncate">{fields.value4}</div>
  </td>
  <td role="gridcell">
  <div class="slds-truncate">{fields.value5}</div>
  </td>
  <td role="gridcell">
  <div class="slds-truncate">{fields.value5}</div>
  </td>
  </tr>
  </template>

Error: [LWC error]: Invalid "key" attribute value in "" in [object:vm undefined (14)] for item number 0. Set a unique "key" value on all iterated child elements.

We are getting the data properly but the component is not loading and showing this error again & again.

  • 1
    We would also need to see the relevant parts of the JS file. The key is apparently not being set, or you're using the wrong field name (they are case sensitive). – sfdcfox Mar 28 at 12:01
  • I would suggest that the item name be set to something other than the name of the property from which the item is being generated; at the very least this is very confusing. I mean here: <template for:each={fields} for:item="fields"> - this would be better is <template for:each={fields} for:item="field"> (note that I changed the item to "field"). – Phil W Mar 28 at 16:53
3

Can you post the code? When iterating through a collection for rendering lists the unique id key is required. Sample below;

<!-- helloForEach.html -->
<template>
    <lightning-card title="HelloForEach" icon-name="custom:custom14">
        <ul class="slds-m-around_medium">
            <template for:each={contacts} for:item="contact">
                <li key={contact.Id}>
                    {contact.Name}, {contact.Title}
                </li>
            </template>
        </ul>
    </lightning-card>
</template>

Documentation

| improve this answer | |
  • Hello Atlas, I have added the code above. – Pratyanch Rajput Mar 28 at 8:11
0

I had similar issue. Pay attention to uppercase/lowercase. I see you have key={fields.id} in your html. Change to key={fields.Id} Even if your SOQL mentions "Select ID, whatever ...from " in the front end and js it has to be Id not ID or id

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.