I want to toggle between two icons using visibility conditions: an empty heart when text is not favorited, and a full heart when clicking the empty heart triggers saving the text to a “favorites” page.
This functionality partially works:
The database updates correctly
The favorites page (list of favorited content) refreshes properly
However, the “empty heart” icon remains visible on the original text page when we should see the “full heart” icon instead. How can I fix this issue?
I didn’t use a “toggle” component because I need the icons to update simultaneously on both:
In my opinion, you need to use a true/false property (E.g., Favorites) for your text also along with the actions as the heart icon will not modify itself. Along with the text addition, update the property to true when favorited and vice versa. You can either use two hearts (empty and full heart) on the both the pages and set the conditional visibility based on true false property (but a toggle might be an easiest option. They will be updated automatically on both the pages if you set ‘What does this toggle do?’ section based on ‘Favorites’ true/false property).