SwiftUI: When I toggle the Bool showAnswer, all the answers to all the questions are displayed. I need to toggle each answer separately - mvvm

Question

I am unable to toggle the answer to each question independently. I tried adding a Bool to the struct holding the question and answer, but the error says the Bool is immutable.
https://github.com/williamallenmd/FlashCardTests
import SwiftUI
struct ItemsView: View {
#StateObject var vm = ItemViewModel()
#State private var showAnswer: Bool = false
var body: some View {
List(vm.items) { item in
VStack(alignment: .leading, spacing: 10) {
Button(item.question) {showAnswer.toggle()}
showAnswer ? Text(item.answer) : Text(" ")
}
}
.onAppear { vm.fetch()}
}
}

Answer 1

you could try this simple approach, works well for me:
With this approach, there is no need for every item to have its own State,
or for an array of variables with keys, or to change your model.
struct ItemsView: View {
#StateObject var vm = ItemViewModel()
#State private var showAnswer: Bool = false
#State private var selectedItem: ItemModel = ItemModel() // <--- here
var body: some View {
List(vm.items) { item in
VStack(alignment: .leading, spacing: 10) {
Button(item.question) {
selectedItem = item // <--- here
showAnswer = true
}
// --- here ---
if showAnswer && selectedItem.id == item.id {
Text(selectedItem.answer)
} else {
Text(" ")
}
}
}
.onAppear {
vm.fetch()
}
}
}

Answer 2

As the comments say, you only have one #State variable and it cannot change each Answer individually by itself. You either have to add a new property to vm.items which would be showAnswer. This would look like this:
import SwiftUI
struct ItemsView: View {
#StateObject var vm = ItemViewModel()
var body: some View {
List(vm.items) { item in
VStack(alignment: .leading, spacing: 10) {
Button(item.question) {item.showAnswer.toggle()}
item.showAnswer ? Text(item.answer) : Text(" ")
}
}
.onAppear { vm.fetch()}
}
}
Otherwise, you can make the showAnswer variable an array, enumerating the items and using their keys.