How to make an individual button icon change for each ForEach item on SwiftUI?

Question

I am trying to make each individual item button change from a cart icon a different icon when clicked in my ForEach. But when I click on a button every button icon change. How can I fix this?

Thank you so much

@StateObject var vm = ShopViewModel()
@State var isShowing = false
@State var cartItemCount = 0
@State var itemCart = false

var body: some View {
    NavigationView {
           
        
    ScrollView(/*@START_MENU_TOKEN@*/.vertical/*@END_MENU_TOKEN@*/, showsIndicators: false) {
    VStack {
    ForEach(vm.foods) { food in
        HStack {
        NavigationLink(
            destination: DetailView(foody: food, isCanceled: $isShowing),
            label: {
                Image(food.imageURL)
                    .resizable()
                    .frame(width: /*@START_MENU_TOKEN@*/100/*@END_MENU_TOKEN@*/, height: /*@START_MENU_TOKEN@*/100/*@END_MENU_TOKEN@*/)
                Text(food.name)
                    .bold()
           
                
            Spacer()
            Text("$\(food.price)").padding()
                
            
        }).foregroundColor(.black)
            Spacer()
            Button(action: {
                cartItemCount += 1
                
            }, label: {
                Image(systemName: "cart")
                    .frame(width: 70, height: 50)
                    .background(Color("yColor"))
                    .cornerRadius(30)
                
            }).padding(.trailing, 30)
         
        }.padding(.leading, 20)
        
    }
    }.padding(.top, 30)
   }
   
    .navigationTitle("Falco Shop")
    .navigationBarItems(trailing: CartIcon(cartItemCount: $cartItemCount).padding(.top, 90).padding())
}
  
}

Answer 1

Here is an example how you can do this:

import SwiftUI

struct ContentView: View {
    
    @StateObject var vm = ShopViewModel()
    @State var isShowing = false
    @State var cartItemCount = 0
    @State var itemCart = false
    
    var body: some View {
        NavigationView {
            
            
            ScrollView(.vertical, showsIndicators: false) {
                VStack {
                    ForEach(vm.foods.indices, id:\.self) { index in
                        HStack {

                            Text(vm.foods[index].name)
                            Spacer()
                            Button(action: {
                                cartItemCount += 1

                                vm.foods[index].selected.toggle()
                                
                            }, label: {
     
                                    Image(systemName: vm.foods[index].selected ? "cart.fill" : "cart")
                                    .frame(width: 70, height: 50)
                                    .background(Color("yColor"))
                                    .cornerRadius(30)
                                
                            }).padding(.trailing, 30)
                            
                        }.padding(.leading, 20)
                        
                    }
                }.padding(.top, 30)
            }
            .navigationTitle("Falco Shop")
            
        }
        
    }
}

---

class ShopViewModel: ObservableObject {

    @Published var foods: [Food] = [Food(name: "apple", price: 2.0, selected: false, imageURL: "apple")]

}

---

struct Food: Identifiable {
    let id: UUID = UUID()
    var name: String
    var price: Double
    var selected: Bool
    var imageURL: String
}