Views do not update inside the ForEach in SwiftUI

Question

I'm using a ForEach to parse a list of models and create a view for each of them, Each view contains a Button and a Text, the Button toggles a visibility state which should hide the text and change the Button's title (Invisible/Visible).

struct ContentView: View {

    var colors: [MyColor] = [MyColor(val: "Blue"), MyColor(val: "Yellow"), MyColor(val: "Red")]

    var body: some View {

        ForEach(colors, id: \.uuid) { color in
            ButtonColorView(color: color.val)
        }

    }
}

struct ButtonColorView: View {

    var color: String

    @State var visible = true

    var body: some View {

        if visible {
            return AnyView(  HStack {
                Button("Invisible") {
                    self.visible.toggle()
                }
                Text(color)
            })
        } else {
            return AnyView(
                Button("Visible") {
                    self.visible.toggle()
                }
            )
        }
    }
}



class MyColor: Identifiable {
    let uuid = UUID()
    let val: String

    init(val: String) {
        self.val = val
    }
}

Unfortunately it's not working, the views inside the ForEach do not change when the Button is pressed. I replaced the Foreach with ButtonColorView(color: colors[0].val) and it seems to work, so I'd say the problem is at ForEach.

I also tried breakpoints in ButtonColorView and it seems the view is called when the Button is triggered returning the right view, anyways the view does not update on screen.

So, am I using the ForEach in a wrong way ?

This problem occurs in a more complex app, but I tried to extract it in this small example. To summarize it: I need ButtonColorView to return different Views depending of its state (visibility in this case)

PS: I'm using Xcode 11 Beta 6

Answer 1

You are using ForEach correctly. I think it's the if statement within ButtonColorView's body that's causing problems. Try this:

struct ButtonColorView: View {

    var color: String

    @State var visible = true

    var body: some View {
        HStack {
            Button(visible ? "Invisible" : "Visible") {
                self.visible.toggle()
            }
            if visible {
                Text(color)
            }
        }
    }
}

You can also try something like this:

struct ButtonColorView: View {

    var color: String

    @State var visible = true

    var body: some View {
        HStack {
            if visible {
                HStack {
                    Button("Invisible") {
                        self.visible.toggle()
                    }
                    Text(color)
                }
            } else {
                Button("Visible") {
                    self.visible.toggle()
                }
            }
        }
    }

}