Binding not working in view when view is generated in loop

Question

Problem: i tried to make this example https://swiftui-lab.com/communicating-with-the-view-tree-part-1/ a bit swiftier by not using the same MonthView() 12 times but in a loop. Unfortunately when tapping the label/month the variable activeIdx won't be updated and I have no idea why... and my question is: how do i have to change the code that the binding works? Expected behaviour: When you tap on the month names the red border should mark the label you tapped.

import SwiftUI

let months : [String] = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]

struct ContentView : View {

    @State private var activeIdx: Int = 0

    var groupedGroupedViews : [[MonthView]] = []

    init() {

        var groupedViews : [MonthView] = []
        for idx in 0..<months.count {
            print(idx)
            groupedViews.append(MonthView(activeMonth: self.$activeIdx, label: months[idx], idx: idx))
            print(months[idx])
            if (idx + 1) % 4 == 0 {
                groupedGroupedViews.append(groupedViews)
                groupedViews = []
            }
        }
        groupedGroupedViews.append(groupedViews)
    }

    var body: some View {
        VStack {
            ForEach (groupedGroupedViews, id: \.self) { groupedViews in
                HStack {
                    ForEach (groupedViews, id: \.idx) { view in
                        view
                    }
                }
            }
        }
    }
}

struct MonthView: View, Hashable {

    func hash(into hasher: inout Hasher) {
        hasher.combine(idx)
    }

    static func == (lhs: MonthView, rhs: MonthView) -> Bool {
        return lhs.idx == rhs.idx
    }

    @Binding var activeMonth: Int
    let label: String
    var idx: Int

    var body: some View {
        Text(label)
            .padding(10)
            .onTapGesture {
                print(self.idx, " tapped")
                self.activeMonth = self.idx
                print("active = ", self.activeMonth)
        }

            .background(MonthBorder(show: activeMonth == idx))
    }
}

struct MonthBorder: View {
    let show: Bool

    var body: some View {
        RoundedRectangle(cornerRadius: 15)
            .stroke(lineWidth: 3.0).foregroundColor(show ? Color.red : Color.clear)
            .animation(.easeInOut(duration: 0.6))
    }
}

Answer 1

The reason is you cannot init a binding View like that.

var myView : MonthView!
init() {
  myView =  MonthView(activeMonth: self.$activeIdx, label: months[0], idx: 1)
} 

var body: some View {
    myView}

If you run above code, you still can see activeMonth is not changing.

I think the init() mainly bridges some UIKit features and should be not used as a major way in SwiftUI. Cross platform is necessary but try to avoid if possible. Please appreciate the design merit of swiftUI not the overhead from traditional implementations.

One simple answer to this is moving the init to View. That reaches the same function you need.

 var body: some View {

            let groupedGroupedViews : [[MonthView]] = {
                var groupedGroupedViews : [[MonthView]]  = []
                    var groupedViews : [MonthView] = []
                    for idx in 0..<months.count {
                        print(idx)
                        groupedViews.append( MonthView(activeMonth: self.$activeIdx, label: months[idx], idx: idx))
                        print(months[idx])
                        if (idx + 1) % 4 == 0 {
                            groupedGroupedViews += [groupedViews]
                            groupedViews.removeAll()
                        }
                    }
                    groupedGroupedViews +=  [groupedViews]
                return groupedGroupedViews
            }()

         return   VStack {

                ForEach (groupedGroupedViews, id: \.self) { groupedView in
                    HStack {
                        ForEach (groupedView, id: \.idx) { view in
                        view
                        }
                    }
                }
            }
        }

Answer 2

I found it, thanks to E.Coms, i have changed my code and now it works. Here my solution (but i am pretty sure you could do better)

struct ViewValue : Hashable {

    var idx: Int
    var text: String
}


struct ContentView : View {

    @State private var activeIdx: Int = 0

    var groupedGroupedValues : [[ViewValue]] = []

    init() {

        var groupedValues : [ViewValue] = []
        for idx in 0..<months.count {
            print(idx)
            groupedValues.append(ViewValue(idx: idx, text: months[idx]))
            print(months[idx])
            if (idx + 1) % 4 == 0 {
                groupedGroupedValues.append(groupedValues)
                groupedValues = []
            }
        }
        groupedGroupedValues.append(groupedValues)
    }

    var body: some View {
        VStack {
            ForEach (groupedGroupedValues, id: \.self) { groupedValue in
                HStack {
                    ForEach (groupedValue, id: \.idx) { viewValue in
                        MonthView(activeMonth: self.$activeIdx, label: viewValue.text, idx: viewValue.idx)
                    }
                }
            }
        }
    }
}