The logic of clicking like in SwiftUI - ios

Question

world! I want to make sure that the like is placed only on one card, and not on all at once. I wrote the logic of painting the like and clicking it. But this applies to all cards, not just the one where I clicked like.
How can I change the logic so that the like is placed only on the card I clicked on?
Below the code CellView() is a cell with a card, which I then use in another view
struct CellView: View{
//MARK: - PROPERTIES
#AppStorage("isLiked") var isLiked: Bool = false
var data: Model
//MARK: - BODY
var body: some View{
VStack{
VStack{
AnimatedImage(url: URL(string: data.photo)!)
.resizable()
.aspectRatio(contentMode: .fit)
.overlay(RoundedRectangle(cornerRadius: 10).stroke(Color("GrayWhite"), lineWidth: 0.5)
)
}.background(Color.white)
.cornerRadius(10)
VStack{
HStack{
Text("\(data.price) ₽")
.font(.system(size: 16, weight: .bold))
.foregroundColor(Color("BlackWhite"))
Spacer()
Button(action: {
self.isLiked.toggle()
}, label: {
Image(systemName: isLiked ? "heart.fill" : "heart")
.frame(width: 22, height: 22)
.foregroundColor(isLiked ? .red : .black)
})
}.padding(.bottom, 1)
HStack{
Text(data.company)
.font(.system(size: 14, weight: .bold))
.lineLimit(1)
.foregroundColor(Color("BlackWhite"))
Spacer()
}
HStack{
Text(data.name)
.font(.system(size: 14, weight: .bold))
.lineLimit(1)
.foregroundColor(.gray)
Spacer()
}
}
.padding(.horizontal, 2)
}
.padding(5)
}
}
Thank you in advance for your help

Answer 1

Each cell has to be identified for Swift to know what is liked.
import SwiftUI
struct CardData: Identifiable {
var id: String = UUID().uuidString
// add the rest of the data associated with the cards, company, etc.
}
And if we want to follow the MVVM-structure you create a separate file for the functions (when we check like and unlike each card).
class CellViewModel: ObservableObject {
#Published var card: CardData!
#Published var isLiked = false
func like() {
isLiked.toggle()
}
}
Now all our CellViews can be liked seperately (I removed some your inputs, for test)
struct CellView: View{
//MARK: - PROPERTIES
#ObservedObject var cellViewModel: CellViewModel = CellViewModel()
init(cardData: CardData) {
self.cellViewModel.card = cardData
}
//MARK: - BODY
var body: some View{
VStack{
VStack{
Image(systemName: "circle")
.resizable()
.aspectRatio(contentMode: .fit)
.overlay(RoundedRectangle(cornerRadius: 10).stroke(Color("GrayWhite"), lineWidth: 0.5)
)
}.background(Color.white)
.cornerRadius(10)
VStack{
HStack{
Text(" ₽")
.font(.system(size: 16, weight: .bold))
.foregroundColor(Color("BlackWhite"))
Spacer()
Button(action: {
cellViewModel.like()
}, label: {
Image(systemName: cellViewModel.isLiked ? "heart.fill" : "heart")
.frame(width: 22, height: 22)
.foregroundColor(cellViewModel.isLiked ? .red : .black)
})
}.padding(.bottom, 1)
HStack{
Text("company")
.font(.system(size: 14, weight: .bold))
.lineLimit(1)
.foregroundColor(Color("BlackWhite"))
Spacer()
}
HStack{
Text("name")
.font(.system(size: 14, weight: .bold))
.lineLimit(1)
.foregroundColor(.gray)
Spacer()
}
}
.padding(.horizontal, 2)
}
.padding(5)
}
}
Testing liking seperately:
struct ContentView: View {
var body: some View {
VStack {
CellView(cardData: CardData())
CellView(cardData: CardData())
CellView(cardData: CardData())
CellView(cardData: CardData())
}
}
}