AnswerBun.com

How to pass the value from parent component to child component on load in LWC?

Salesforce Asked on January 2, 2022

I have this scenario. I am having a getRecord wire method in parent component which is assigning a field value to the variable. That value is passed to the child component. I have a connectedCallback() function in the child component which is having some logic based on the value passed through the parent component.

Issue: The wire method in parent component is running after the connected callback() function in the child component and getting the value as undefined even though the record has value on that field. Can anyone help in resolving this.

Parent Component:
JS

import STATUS_FIELD from @salesforce/schema/customObject__c.status__c;
import { getRecord } from 'lightning/uiRecordApi'

const FIELDS = [STATUS_FIELD];

@api recId
@track status;
@track error;

@wire(getRecord, {recordId: '$recId', fields: FIELDS}) details({error,data}) {
if(data) {
this.status = data.fields.status__c.value;
} else {
this.error = error;
}
}

HTML (calling child component)

<template >
<child-component status-value={status} >
</child-component>
</template>

CHILD Component

JS

@api statusValue;

connectedCallback() {

if(this.statusValue == 'Finished'){
//some logic
}
}
//statusValue is coming as undefined here but the value is actually Finished.

2 Answers

Here parent component is passing account-name prop to child. You don't need connectedCallback() in child for the custom logic, rather you need renderedCallback(). More detailed documentation here

child.html

<template>
    <p>Helllo this is child</p>
    <p>{accountName}</p>    
</template>

child.js

import { LightningElement, api } from 'lwc';

export default class ChildComponent extends LightningElement {
    @api accountName;
    renderedCallback() {
        console.log('Hello this is in render');
        console.log(this.accountName);
        **add you conditional business logic here**
    }
}

parent.html

<template>
<lightning-card title="My Account Record" icon-name="standard:account">
    <template if:true={account.data}>
        <c-child-component account-name={name}>
        </c-child-component>
    </template>
    <template if:true={account.error}>
        {account.error}
    </template>
</lightning-card>

parent.js

import { LightningElement, wire, api } from 'lwc';
import {getRecord} from 'lightning/uiRecordApi';
import NAME_FIELD from '@salesforce/schema/Account.Name';

export default class TestSO extends LightningElement {
    @api recordId;
    @wire(getRecord, { recordId: '$recordId', fields: [NAME_FIELD] })
    account;

    get name() {
        return this.account.data.fields.Name.value;
    }
}

Answered by Yogesh D on January 2, 2022

Make the following changes in parent component and it will start working.

Parent Component: JS

import STATUS_FIELD from @salesforce/schema/customObject__c.status__c;
import { getRecord } from 'lightning/uiRecordApi'

const FIELDS = [STATUS_FIELD];

@api recId
@track status;
@track error;
@track flagIndicatingDataHasBeenLoadedInVariables = false;

@wire(getRecord, {recordId: '$recId', fields: FIELDS}) details({error,data}) {
if(data) {
this.status = data.fields.status__c.value;
this.flagIndicatingDataHasBeenLoadedInVariables = true;
} else {
this.error = error;
}
}

HTML (calling child component)

<template if:true={flagIndicatingDataHasBeenLoadedInVariables}>
     <child-component status-value={status} >
     </child-component>
</template>

Explanation: We are setting a flag after the data is loaded. Only after data is loaded in the parent, it will be passed to the child component.

Answered by Koustubh on January 2, 2022

Add your own answers!

Related Questions

Invalid URI commercepayments.PaymentGatewayAdapter

1  Asked on November 17, 2021 by tabarcea-ioana-carmen

 

Please help. I want to ensure 1 case per lead

1  Asked on November 17, 2021 by mar-been

   

Duplicated notifications in Android

1  Asked on November 15, 2021 by bruno-santos

   

Understanding Batch Apex execution

1  Asked on November 15, 2021

   

Execute List of batch strings

1  Asked on November 15, 2021

   

How to display picklist in VF and save selected value?

0  Asked on November 15, 2021 by cw-deo

   

Activity Sharing

1  Asked on November 13, 2021 by user3881916

 

Test a Trigger with Queues

2  Asked on November 13, 2021

     

How to format date field to ISO 8601 format?

1  Asked on November 13, 2021

       

Execute trigger after the workflow rules

1  Asked on November 13, 2021 by user81642

       

deduping existng leads and contacts

2  Asked on November 11, 2021 by prady

     

Error: List index out of bounds: 1

1  Asked on November 11, 2021 by samara-oliveira

 

Ask a Question

Get help from others!

© 2023 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP, SolveDir