function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Afrose AhamedAfrose Ahamed 

how to pass records from parent to child lwc

Hi All,
I have created Parent component in that when Account search its needs to display contacts. its successfully displayed. i Want to display contacts on child component. So i created on child component and passed values. But its nothing showin. Please help thanks in advance.
 

Parent Component
<template>
    <lightning-card title="How to display the Contacts based on Account Name in LWC" custom-icon="custom:icon13">
     
        <div class="slds slds-p-horizontal--medium">
         <div class="slds-grid slds-wrap">
            <div class="slds-col slds-size_4-of-12 slds-m-bottom--medium">
                <lightning-Input type="search" placeholder="Search..." value={accountName} name="accountName" class="accountName" onchange={handleChangeAccName}></lightning-input>                 
             </div>
             <div class="slds-col slds-size_6-of-12 slds-m-top--medium" style="margin-top: 19px; margin-left: 10px;">                 
                    <lightning-button label="Search Account Name" size="small" variant="brand" onclick={handleAccountSearch} icon-name="utility:search" icon-position="right"></lightning-button>
             </div>
         </div>
          
         <h2>Account Name :- <span><strong>{currentAccountName}</strong></span></h2>
 
         <h3><strong><span style="color:brown;">{dataNotFound}</span></strong></h3>

         <template if:true={flagIndicatingDataHasBeenLoadedInVariables}>
           <c-child-comp records-value={records}></c-child-Comp>
           </template>
</div>
    </lightning-card>
</template>
*****************************************
import { LightningElement, track, wire } from 'lwc';
import retrieveContactData from '@salesforce/apex/lwcAppExampleApex.retrieveContactData';

export default class DisplayContactsOnAccountName extends LightningElement {

   @track currentAccountName;
   @track searchAccountName;
    handleChangeAccName(event){
      this.currentAccountName = event.target.value;      
    }

    handleAccountSearch(){
       this.searchAccountName = this.currentAccountName;
    }
   
    @track records;
    @track dataNotFound;
    @track flagIndicatingDataHasBeenLoadedInVariables = false;
    @wire (retrieveContactData,{keySearch:'$searchAccountName'})
    wireRecord({data,error}){
        if(data){           
            this.records = data;
            this.error = undefined;
            this.dataNotFound = '';
            this.flagIndicatingDataHasBeenLoadedInVariables = true;
            if(this.records == ''){
                this.dataNotFound = 'There is no Contact found related to Account name';
            }

           }else{
               this.error = error;
               this.data=undefined;
           }
    }
}
Child Component

<template>
    <h2 class="slds-m-bottom--x-small" style="color:darkslateblue; font-weight:bold;">Displaying Contacts Records based on Account Name</h2>
           <table class="slds-table slds-table_cell-buffer slds-table_bordered" border="1" cellspacing="0" cellpadding="0" bordercolor="#ccc" style="border-collapse:collapse;">
               <thead>
                   <tr>
                       <th>First Name</th>
                       <th>Last Name</th>
                       <th>Email</th>
                       <th>Phone</th>
                       <th>Description</th>
                   </tr>
               </thead>
               <tbody>
                   <template for:each={records} for:item="conItem">
                       <tr key={conItem.Id}>
                           <td>{conItem.FirstName}</td>
                           <td>{conItem.LastName}</td>
                           <td>{conItem.Email}</td>
                           <td>{conItem.Phone}</td>
                           <td>{conItem.Account.Name}</td>
                       </tr>
                   </template>
               </tbody>
           </table>
        

<br/><br/>
   
</template>
****************************************************
import { LightningElement,api } from 'lwc';

export default class ChildComp extends LightningElement {

    @api recordsValue;
    

}

 



Regards,

Afrose Ahamed M.G.

AnkaiahAnkaiah (Salesforce Developers) 
Hi Afrose,

Refer the below link have solution for similar kind of ask and modfiy the code as per your need.
https://studysection.com/blog/how-to-show-list-of-related-records-using-search-filter-in-lwc/

If this information helps, Please mark it as best answer.

Thanks!!