Toggle properties of a component inside a list item

Gentlemen and ladies, I would wish to toggle icon name for an i con that is inside a list Item as shown on below screenshot

I have two data sources: Products and Cart. I am fetching Products data from external server but Cart is in device database. I want my click an item on product list to delete or create a new record inside Cart hence the need to show users which items he has selected from product list.

So the creating and deleting record is working fine but not the icon name. What I am doing wrong?

Set component property doesn’t work on repeated items ATM, so you need to bind the icon name to a formula.

So if your cart data is in a page var named cart that is an array of items where the objects have a productId field that matches the product ID of the added product, you can determine if the currently repeated item is in the cart and show a different icon name via:

IF(IS_EMPTY(FIND(pageVars.cart, item.productId == current.id)), "icon-not-found", "icon-found")

In general, you want your component properties to always derive their value from some variable instead of setting them ad hoc via Set component property, that way you know WHY your component property has a certain value vs. not knowing what random Set component property flow changed it.

Thanks a lot @Harri_Sarsa .