Button property not updating in SwiftUI - swiftui

Question

I have an array of custom buttons capsuleButtons in ViewModel.swift file which are displayed using ForEach in ContentView. Each button is connected to an external property named isActive to display its current state, buttons created using the ForEach are not updating where as if created without ForEach (with title ContentView btn), is updating as expected. What am I missing here?
ContentView
struct ContentView: View {
#StateObject var vm = ViewModel()
var body: some View {
VStack {
ForEach(vm.capsuleButtons, id: \.self) { button in
HStack {
button
}
}
CapsuleButton(title: "ContentView btn", action: { vm.isActive.toggle() } , active: vm.isActive)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
struct CapsuleButton: View, Hashable {
static func == (lhs: CapsuleButton, rhs: CapsuleButton) -> Bool {
lhs.title == rhs.title && lhs.id == rhs.id
}
func hash(into hasher: inout Hasher) {
hasher.combine(title)
hasher.combine(id)
}
var id = UUID()
var title: String
let action: () -> Void
var active = false
var body: some View {
Button(title, action: action)
.background( active ? Color.pink : Color.blue)
.foregroundColor(active ? Color.white : Color.black)
}
}
ViewModel.swift
import Foundation
class ViewModel: ObservableObject {
#Published var isActive = false
var capsuleButtons = [CapsuleButton]()
init() {
self.isActive = false
self.capsuleButtons = [CapsuleButton(title: "Button 1", action: {self.isActive.toggle()}, active: isActive),
CapsuleButton(title: "Button 2", action: {self.isActive.toggle()}, active: isActive)]
}
}

Answer 1

You're doing a few things that are or are close to breaking the SwiftUI diffing system.
First, you're telling the system an untruth by trying to make your View conform to Hashable and Equatable and then saying that the title and id are the only properties that matter, where you definitely also want active to be part of it.
Secondly, in general, you shouldn't be storing references to Views -- especially with IDs that get created on init -- that's a SwiftUI anti pattern. Instead, render a View hierarchy based on your model.
Finally, in your actions, you are always setting self.isActive -- I assume that you actually wanted to set the Button's active state, but you were always setting it on the ViewModel's state.
Something like this (not the only solution) would work instead:
struct ContentView: View {
#StateObject var vm = ViewModel()
var body: some View {
VStack {
ForEach(vm.capsuleButtons) { button in
HStack {
CapsuleButton(model: button) {
vm.action(forID: button.id)
}
}
}
}
}
}
struct CapsuleButtonModel: Identifiable, Hashable {
var id = UUID()
var title: String
var active: Bool
}
struct CapsuleButton: View {
var model: CapsuleButtonModel
let action: () -> Void
var body: some View {
Button(model.title, action: action)
.background(model.active ? Color.pink : Color.blue)
.foregroundColor(model.active ? Color.white : Color.black)
}
}
class ViewModel: ObservableObject {
#Published var isActive = false
#Published var capsuleButtons = [CapsuleButtonModel]()
init() {
self.isActive = false
self.capsuleButtons = [CapsuleButtonModel(title: "Button 1", active: isActive),
CapsuleButtonModel(title: "Button 2", active: isActive)]
}
func action(forID: UUID) {
self.capsuleButtons = self.capsuleButtons.map { btn in
if btn.id == forID {
var copy = btn
copy.active.toggle()
return copy
} else {
return btn
}
}
}
}
You could also get rid of the action(for) function and replace it with a Binding (in particular, read about SwiftUI element binding syntax: https://www.swiftbysundell.com/articles/bindable-swiftui-list-elements/). Then it turns into something even more simple:
struct ContentView: View {
#StateObject var vm = ViewModel()
var body: some View {
VStack {
ForEach($vm.capsuleButtons) { $button in
HStack {
CapsuleButton(model: $button)
}
}
}
}
}
struct CapsuleButtonModel: Identifiable, Hashable {
var id = UUID()
var title: String
var active: Bool
}
struct CapsuleButton: View {
#Binding var model: CapsuleButtonModel
var body: some View {
Button(model.title, action: {
model.active.toggle()
})
.background(model.active ? Color.pink : Color.blue)
.foregroundColor(model.active ? Color.white : Color.black)
}
}
class ViewModel: ObservableObject {
#Published var isActive = false
#Published var capsuleButtons = [CapsuleButtonModel]()
init() {
self.isActive = false
self.capsuleButtons = [CapsuleButtonModel(title: "Button 1", active: isActive),
CapsuleButtonModel(title: "Button 2", active: isActive)]
}
}