0

I am creating a Standard table but it did not work. After some search, i tried to implement this solution Lightning Web Component for table rows and cells but always the key is throwing error.

here is the JS error.

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

Parentcomp.html

 <template if:true={alltraffic.data}>                
 <table class="slds-table slds-table_bordered slds-border_left slds- 
 border_right" >
 <thead>
  <tr class="slds-line-height_reset">
    <th class="" scope="col">
          <div class="slds-truncate"  title="Type">Type</div>
    </th>
  </tr>
 </thead>
 <tbody>
    <template for:each={alltraffic.data} for:item="traffic">
         <c-traffic-data key={traffic}></c-traffic-data>
    </template>
 </tbody>
 </table>
 </template>

trafficData.html

   <template>
    <th data-label="Type" scope="row">
        <div class="slds-truncate" title={row.Type}>{row.Type}</div>
    </th>
    <td data-label="Monday">
        <div class="slds-truncate">
            <p>{row.Monday}</p>
        </div>
    </td>
    </template>

trafficData.css

:host {
   display: table-row;
 }
3
  • 3
    If you are posting a question about an error, please always include the complete text of the error and its location. We can't run your code in many situations; we need you to help us help you by providing all of the relevant details. Please take some time to read How to Ask to learn about this site's expectations.
    – David Reed
    Dec 10 '19 at 1:19
  • 1
    You should make an edit to the body of your post to include this information.
    – David Reed
    Dec 10 '19 at 1:20
  • Added the error message to the question.
    – Rajesh
    Dec 10 '19 at 17:11
1

For the "key", you'll need to use a unique property from the object you are iterating... you can't use the object itself. (IOW: Use c-traffic-data key={traffic.Type} instead of {traffic} [as long as "Type" is unique to each row])

https://developer.salesforce.com/docs/component-library/documentation/lwc/create_lists

Every item in a list must have a key. When a list changes, the framework uses the key to identify each item so that it can rerender only the item that changed. The key must be a string or a number, it can't be an object. You can’t use index as a value for key. Assign unique keys to an incoming data set. To add new items to a data set, use a private property to track and generate keys.

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