Why aura:iteration doesn’t re-render when you add element to parent component’s list?

I declared a parentComponent with an attribute of type list. I am passing that list to child component.

In my child component, I am iterating over that list using aura:iteration . Also I provided a button in child component to new elements to the list I got from parent compoent, I am able to add it. but then aura:iteration doesn’t render the newly updated value.

If I just use the child component, the aura:iteration re-rendring works.

Cant we update the parent component’s value from child component? If so why aura:iteration not showing updating value?

here is my minimum viable code to reproduce this issue.

childComponent.cmp

<aura:component >
    <aura:attribute type="List" name="myList" default="[]"></aura:attribute>

    <aura:iteration items="{!v.myList}" var="ele" indexVar="count">

        {!count}<br></br> 
    </aura:iteration>
    <lightning:button variant="brand" label="addNewElement" title="addNewElement" onclick="{!c.addNewElement }"/>
</aura:component>

ChildComponentController.js

({
    addNewElement : function(component, event, helper) {
        let retList=component.get("v.myList");
        retList.push({}); //Adding new element
        component.set("v.myList", retList);  
        console.log('pushed'+retList.length);
    }
})

ParentComponent.cmp

<aura:component >
    <aura:attribute type="List" name="myList" default="[]"></aura:attribute>

    <c:childComponent myList="{!v.myList}"></c:childComponent>
</aura:component>

That being said, pressing the addNewElement button, adds element in child element, no matter how many time you press that button, but in case when its embeded in parent component, the aura: iteration rerenders only once.

Update : As suggested by Raul, i tried
{#v.myList} while passing value to child component. It works, but same values are not reflected back to parent, (Which is the behaviour of unbound expression).

Answer

I got a similar issue before. The workaround for me is to new an empty list and push all elements into the new list. Then, set the attribute with the new list.

I guess the Aura framework detects the internal store address change or not to decide whether the attribute gets changed, thus rerender the components.

Attribution
Source : Link , Question Author : Pranay Jaiswal , Answer Author : sherry peng

Leave a Comment