How to get @api property value from parent to child in LWC?

Question

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>
                            

Answer 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;