Unable to send @api Object variable or array in LWC from parent to Child

javascriptlightning-web-componentsparent-to-child

Please help whenever I am trying to pass the object then it is not getting passed from Parent to Child but if I am passing string values then it is getting passed to child component.
Please help.

Inside Parent component I am calling child and passing getchecboxDataforChild which returns the object values:

Parent LWC:

<c-generic-checklist 
  chkbox-obj-data={getchecboxDataforChild}
  source-category="inc-source"
  oncheckboxvaluechange={handleChildEvent}
></c-generic-checklist>

handleChildEvent(event) {          
  this.getchecboxDataforChild();   
}
getchecboxDataforChild() {
  console.log('chkdata= ', Object.keys(this.chkboxObjDatafrmParent));

  this.chkboxObjDatafrmParent = {
    headervar:this.labels.somelabel
  }; 

  this.template.querySelector('c-generic-checklist').chkboxObjData = this.chkboxObjDatafrmParent;
  return this.chkboxObjDatafrmParent;
}

Child LWC:

@api chkboxObjData;
@api sourceCategory;

renderedCallback() {
  // value here is blank for some reason
  console.log('chkboxObjData: ', this.chkboxObjData)

  // value here is "inc-source"
  console.log('sourceCategory: ', this.sourceCategory)
}

Best Answer

instead of passing a method getchecboxDataforChild pass the property chkboxObjDatafrmParent

Related Solutions

[SalesForce] How to pass the value from parent component to child component on load in LWC

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.

[SalesForce] Changed value in Parent not updated in child component in LWC

The reason why this happens, is that updating the child's @api property within the child doesn't inform the parent of the change (it still thinks that open is false).

Consequently, when the parent's cityList notices it has been changed, it causes a render cycle, which compares the old values that were in cityList previously to the new values that are in cityList.

Since false === false, the child component's property isn't updated, because no change was detected in the parent's data.

Instead, set the value from the parent:

// in helloChildComponent.js
makeTrue() {
    this.dispatchEvent(new CustomEvent('open',{detail:{city:this.city}}))
}

<!-- in c-hello-parent-component.html -->
<c-hello-child-component onopen={openCity} city={city.city} open={city.open}>

// helloParentComponent.js
openCity(event) {
    this.cityList.find(item => item.city === event.detail.city).open = true
}

This ensures that elements that have changed are tracked at the parent level, and the children will update accordingly.

Related Topic