0

I am trying to pass value from parent LWC component to child LWC component api property, but i am getting TypeError: Cannot read properties of undefined (reading 'Id') ?

Parent.html

<c-child total-list ={totalList}>

Parent.js

import { LightningElement, track,api } from "lwc";

export default class Parent extends LightningElement {
  totalList =[];
  data=[
  {
   ProductType: "Phone"
   ProductList: (2) [{id:'12',Name:"Product1"}, {…}]
   }
  this.totalList= this.data.filter(e=>e.recId ===targetId).map(e=>e.ProductList);
}

Child.js

 import { LightningElement, track } from "lwc";
    
    export default class Child extends LightningElement {
    @api totalList;
}

Child.html

<template for:each={totalList} for:item="prdt">
                                <div key={prdt.Id}>
                                     {prdt.Name}
                                </div>
                            </template>
                            
2
  • 2
    Your child does not import api. Is this a mistake in your code snippet or in your component?
    – Phil W
    Feb 17 at 18:24
  • 2
    Please edit the question to explicitly provide the exact error you get.
    – Phil W
    Feb 17 at 18:25

1 Answer 1

1

Be careful of the way you name the references in lwc this has to be with correct kebab case.

In the parent component you need to name you child component like this:

<c-child-lwc var-output={strInput}></c-child-lwc>

In the child component you could get the value like this :

@api varOutput;

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.