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

Question

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

Answer 1

instead of passing a method getchecboxDataforChild pass the property chkboxObjDatafrmParent

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