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

Fetch Field Label in Lightning Web Components

1  Asked on November 5, 2021 by pranay-jaiswal

 

Nested array/for loop

1  Asked on November 5, 2021 by user85246

     

Ant validation/deployment errors using sessionId

0  Asked on November 5, 2021 by szosteczka

         

Set a default value for a lookup field

1  Asked on October 4, 2021 by aurlien-laval

   

Class to update lookup failing

1  Asked on October 4, 2021 by phuc

 

Push fail for “force:source:push

1  Asked on October 4, 2021 by noor-a-shuvo

 

Ask a Question

Get help from others!

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