0

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)
}
2

instead of passing a method getchecboxDataforChild pass the property chkboxObjDatafrmParent

2

It looks like you are attempting to pass down a function, not a value, to your child LWC.

instead of:

// Parent LWC
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;
}

convert it to a get (LWC: Use Getters to Compute a Value).

// Parent LWC

// note the 'get' here to mark it as a getter, not a function
get 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;
}

running the querySelector is also not needed as you're directly passing the data, not setting it on the child.

This could be further simplified to:

// Parent LWC

// note the 'get' here to mark it as a getter, not a function
get getchecboxDataforChild() {
  return {
    headervar:this.labels.somelabel
  };
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.