Aura method not firing from Parent component

Question

I'm not sure why today is seeming like a Monday again. I'm referencing these articles letter for letter but yet my code is not executing the child component method. I'm probably missing something simple, can anyone help me out? I'm just trying to refresh the child component when clicking a button from the parent. The child component is in an aura iteration and im going to need to pass new data to it on click but would first like it to just work as intended.

Use Case: Clicking next button on parent screen should refresh data in child component.

For the sake of simplicity i'm going to try to only post relevant code.

Parent CMP

<aura:component controller="MonthlyBudget_Controller" implements="lightning:isUrlAddressable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:appHostable" access="global" >
     
  <lightning:button iconName="utility:chevronright" iconPosition="right" onclick="{!c.getNextMonths}"/>
     
     <thead>
     </thead>
     <tbody>
        <aura:iteration items="{!v.BudgetRecords}" var="budget" indexVar="idx">
              <c:MonthlyBudgetDetail aura:Id="childComp" showSaveCancelBtn="{!v.showSaveCancelBtn}" 
                                     BudgetRec="{!budget}" index="{!idx}" 
                                     />
            </aura:iteration>
     </tbody>
</aura:component>

Parent Controller

getNextMonths : function(component, event)
{
   var cc = component.find('childComp').refreshScreen();
   
   //also tried
   var cc=component.find('childComp');
   cc.refreshScreen;

   //and
   var auraCmp = component.find('childComp');
   var lwcElm = auraCmp.getElement();
   lwcElm.refreshScreen();
}

Child CMP

<aura:component controller="MonthlyBudget_Controller" implements="lightning:isUrlAddressable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:appHostable" access="global" >
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:method name="refreshScreen" action="{!c.handleRefresh}" access="PUBLIC"/>
</aura:component>

Child Controller

doInit : function(component, event, helper)
{
   alert('Initialized');  //actually does other stuff
},
//called from parent component when next or previous is clicked
handleRefresh : function(component, event, helper)
{
   alert('refreshed'); //does same thing as doInit
}

Preferably i would like to just call the 'doInit' method again but as debugging i thought maybe that was the issue so i tried creating a separate method for it but still no luck. I can find the child component but i can't call the aura:method. Any thoughts?

References:

Using this: Aura : Method issue ; Not able to call aura method

Also used this: https://www.sfdcpoint.com/salesforce/aura-method-in-lightning-salesforce/

Tried debugging with this: How do we manually call (child) LWC component method from (parent) Aura component?

Answer 1

aura:Id should be aura:id. Remember, everything in Aura is case-sensitive.

---

component.find has one of three return types: null, a SecureComponent, or an Array of SecureComponent. You need to treat it differently depending on the content.

let findResults = component.find("childComp");
let children = findResults || []; // if null, make an empty array
if(!$A.util.isArray(children)) { // if not an Array
  children = [children]; // make it an Array, will have length 1
}
children.forEach((child) => child.refreshScreen());

---

Alternatively, you can selectively update records by adding a change handler in the child:

<aura:handler name="change" value="{!v.BudgetRec}" action="{!c.refreshScreen}" />