Aura method is not a function issue for dynamic component creation

Question

Creating ModalContent component dynamically on 'Generate Modal Content' button click. When click on 'Call Aura Method' button calling the ModalContent's test method function using aura:method is working fine at very first time. When i do the same process again, i'm getting [contentCmp.testMthd is not a function].

Instead of creating dynamically, when i used same component in markup its working as expected. What is actually causing here?

GenerateChildContent.app

<aura:application extends="force:slds">
        <aura:attribute name="hasChildCmp" type="Boolean" default="false"/>

        <div aura:id="createCmp">

        </div>

        <lightning:button label="Generate Modal Content" onclick="{!c.generateCmp}"/>
         <aura:if isTrue="{!v.hasChildCmp}">
            <lightning:button label="call Aura Method" onclick="{!c.callAuraMethod}"/>
        </aura:if>

    </aura:application>

GenerateChildContentController.js

({
    generateCmp : function(cmp, event, helper) {

        $A.createComponent(
            "c:ModalContent",
            {
                "aura:id" : "contentCmp"  
            },
            function(modalboady, status, errorMessage){
                if(status  === "SUCCESS"){
                    var createCmp = cmp.find("createCmp");
                    createCmp.set("v.body", modalboady);
                    cmp.set("v.hasChildCmp", true);
                }else{
                    console.log("error::", errorMessage);
                }
            }
        );
    },
    callAuraMethod : function(cmp, event, helper){
        var contentCmp = cmp.find("contentCmp");
        if(contentCmp){
            contentCmp.testMthd();
        }

    }
})

ModalContent.cmp

<aura:component >
    <aura:attribute name="hasAuraMthdCalled" type="Boolean" default="false"/>
    <div> Modal content render </div>
    Aura method Called : {!v.hasAuraMthdCalled}
    <aura:method name="testMthd" action="{!c.testMethod}"/>
</aura:component>

ModalContentController.js

testMethod : function(cmp, event, helper) {
        cmp.set("v.hasAuraMthdCalled", true);
    }

Answer 1

When you click on the component after first time, it returns an array instead of a Object. This is probably a known issue with dynamic component creation.

To resolve this issue, replace:

contentCmp.testMthd();

with:

[].concat(contentCmp)[0].testMthd();

---

Note the debug statement console.log("contentCmp", contentCmp); after logging contentCmp: