Toggle Icon value in Iteration

Question

I have a table that I'm generating using aura:iteration. And the code is as below.

<aura:attribute name="icon" type="String" default="utility:down"/>
<aura:iteration items="{!v.careerData}" var="note">
        <tr>
            <td data-id="{!note.id}" > 
                <div class="slds-truncate clist1" data-id="{!note.id}" >
                    {!note.noteText}
                </div>
                <div> <lightning:buttonIcon iconName="{!v.icon}" variant="bare" onclick="{! c.handleClick }" alternativeText="Settings" title="Settings" /></div>
            </td>
            <td>{!note.contactedByType}</td>
        </tr>
    </aura:iteration>

here In my handleClick, I want to toggle the icon of only the clicked buttonIcon

when I'm trying to use the below js, it is toggling all the icons.

handleClick: function(c,e){
        c.set("v.icon", c.get("v.icon")=="utility:down"? "utility:up":"utility:down");
}

Please let me know where am I going wrong and how can I fix this.

Thanks

Answer 1

What you are doing here is to change the value of the v.icon attribute. That change will apply to all the places in which you're using it (all the buttons).

What you can do instead, is to get the button element that was clicked, and change its iconName:

({
    handleClick: function(c,e){
        var clickedButton = e.getSource();
        var currentIconName = clickedButton.get("v.iconName");
        var nameToSet = currentIconName === "utility:down"? "utility:up":"utility:down"
        clickedButton.set("v.iconName", nameToSet);
    }
})

Indeed you don't need the v.icon attribute. You can just initialize the iconName to "utility:down", and then change it when clicked.