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)
}
1
  • As an aside - I strongly encourage you to look at how you decide your variable names - you have multiple variations of 'checkbox' (chkbox, checbox, checkbox), you are sometimes needlessly abbreviating 'from' as 'frm', and your capitalisation is inconsistent (getchecboxDataforChild should really be getChecboxDataForChild). It will seem like these are minor things that don't matter, but when you've chased your tail for 2 hours working out why something doesn't work before you realise that your method is getdataFrmThing instead of getDatafromThing, you'll understand why it REALLY does. Feb 9 at 13:39

2 Answers 2

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
  };
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .