Multiple selections in SwiftUI ForEach

Question

I am trying to select multiple views of a ForEach view, but it doesn't reflect my selection. I found a solution, but I seems like it s not working in real time, it changes only the data, not the view though.I go back and I reopen the view, it reflects the changes. Also, once I select multiple choices, I would need to send it to server, how I will know which are my selections? I think I should map again userProfile.domainsOfInterest to viewModel.domains. Here is my code of the screen:

struct DomainsOfInterestView: View {
    @EnvironmentObject var userProfile: UserProfile

    @ObservedObject var viewModel: DomainsViewModel = DomainsViewModel()
        
    var body: some View {
            VStack(alignment: .center) {
                HStack {
                    Text("Choose domains of interest for your profile")
                        .foregroundColor(Color.orGrayColor)
                        .font(.custom("SFProDisplay-Regular", size: 16))
                    Spacer()
                }.padding(.bottom, 16)
                VStack{
                    ScrollView {
                        ForEach(viewModel.domains, id: \.self) {item in
                            DomainOfInterestElement(interestDomain: item, isSelected: self.userProfile.domainsOfInterest.contains(item)) {
                                if self.userProfile.domainsOfInterest.contains(item) {
                                    self.userProfile.domainsOfInterest.removeAll(where: { $0 == item })
                                }
                                else {
                                    self.userProfile.domainsOfInterest.append(item)
                                }
                            }
                        }
                    }
                    .padding([.top, . bottom], 15)
                }
                .background(Color.white)
                .cornerRadius(8)
                Spacer()
                OrangeButton(action: {

                }) {
                    Text("Save")
                }.padding([.leading, .trailing, .top], 30)
                    .padding(.bottom, 24)
            }.padding([.leading, .trailing], 12)
            .navigationBarTitle("Domains of interest")
            .background(Color.orBackgroundGrayColor.edgesIgnoringSafeArea(.all))
    }
}

The view of the ForEach:

struct DomainOfInterestElement: View {
    var interestDomain: InterestDomain
    var isSelected: Bool
    var action: () -> Void
    
    var body: some View {
        Button(action: {
            self.action()
        }) {
            VStack {
                HStack {
                    checkBoxView()
                        .frame(width: 36, height: 36)
                    textView().font(.custom("SFProDisplay-Regular", size: 16))
                    Spacer()
                }
            }
        }
    }
    
    func checkBoxView() -> Image {
        switch isSelected {
        case true:
            return Image(uiImage: #imageLiteral(resourceName: "check-box-active-2-1")).renderingMode(.original)
        case false:
            return Image(uiImage: #imageLiteral(resourceName: "check-box-active-1")).renderingMode(.original)
        }
    }
    func textView() -> Text {
        switch isSelected {
        case true:
            return Text(interestDomain.name)
                .foregroundColor(.black)
        case false:
            return Text(interestDomain.name)
                .foregroundColor(Color.orGrayColor)
        }
    }
}

Answer 1

I hope below code help you, just simple property change of the list tape, then gather all selected true item to work on them,

List(list){item in
Button(action: {
      if let index =  self.list.firstIndex(where: {$0.id == item.id }){
         self.list[index].isSelected =  !item.isSelected
                        }
  }) {
    Image(systemName: item.isSelected ? "checkmark.circle" : "circle")
       .foregroundColor(item.isSelected ? Color.black : Color.gray)
       .font(Font.title.weight(.light))
  }
}