Binding two ForEach loop to update each item cell

Question

This is my second post and I need your help as much as possible. I am creating a favorite button on my parent view and detail view. I need both buttons to work correspondent to each other. When I marked favorite on the ForEach loop of my parent view, I want to show the item is favorited in my detail view. Also, I can unfavorite or favorite from my detail view vice vasa. It is really hard for me to figure out how to bind those two ForEach loops. Below I provide an example of my codes. If you want to test with my full code, you can access it here: Making favorite button from several layers and binding two list using EnvironmentObject

struct Data: Identifiable {

    let id = UUID()
    let number: Int
    var name1: String
    let name2: String
}

public struct DataList {
    
    static var dot = [
        
        Data(number: 1,
              
            name1: "Pasian Phatna",
            
            name2: "Praise God, from whom All Blessings Flow"),

        Data(number: 2,
              
            name1: "Itna Kumpi, Ka Tuu-Cing Pa",
            name2: "The King of Love My Shephaerd Is (Dominus Regit Me)"),
            
        Data(number: 3,
              
            name1: "Kumpipa Bia Un",
            
            name2: "O Worship the King"),
            
        Data(number: 4,
          
            name1: "Pa Tung Min Than'na Om Hen",
            name2: "Gloria Patri (1st Tune)"),
            
        Data(number: 5,
        
            name1: "Pa Tung Min Than'na Om Hen",
            
            name2: "Gloria Patri (2nd Tune)")       
    ]
}

struct ParentView: View {
    
    @State var datas: [Data] = DataList.dot
    
    var body: some View {
        
        NavigationView {
            
            ScrollView (.vertical, showsIndicators: false) {
                LazyVStack(spacing: 5) { 

                    ForEach (datas, id: \.id) { data in

                        MainData(data: data)
                        
                        
                        Divider()
                            .padding(.all)
                    }
                }
            }
            .navigationBarHidden(true)
        }
        .navigationViewStyle(StackNavigationViewStyle())
    }
}

struct MainData: View {

    @State var data: Data
    @State var selectedFavoriteSong: Bool = false
    
    
    var body: some View {
        HStack {
            Button(action: {
                self.selectedFavoriteSong.toggle()
            }, label: {
                if selectedFavoriteSong {
                    Image(systemName: "suit.heart.fill")
                        .foregroundColor(.red)
                        .padding(.horizontal)

                } else {
                    Image(systemName: "suit.heart")
                        .padding(.horizontal)
                }
            })
            
            Spacer()
            Text("\(data.number)")

            Spacer()
            
        }
        .padding(.top)
        
        VStack {
            
            Text(data.name1)
                .font(.title2.smallCaps())
                .fontWeight(.bold)
                .foregroundColor(.primary)
            
            Text(data.name2)
                .font(.title3)
                .fontWeight(.medium)
                .foregroundColor(.secondary)
                .italic()
        }
        .padding(.horizontal)
        .multilineTextAlignment(.center)
    }
}

Please consider, the Search() below will pop up when I tapped the search icon (which is not presented here). My point is the Search() is not directly connect to the ParentView() but the DetailView() is embedded in the Search().

struct Search: View {

    @State var datas: [Data] = DataList.dot
    
    var body: some View {
        NavigationView {
            ScrollView (.vertical, showsIndicators: false) {
                LazyVStack(alignment: .leading, spacing: 10) {
                    
                    ForEach (datas, id: \.id) { data in
                        
                        NavigationLink(
                            destination: DetailView(data: data),
                            label: {
                                Text("Search")
                            })

                        }
                    
                    }.padding(.horizontal)
                }
        }
    }
}

struct DetailView: View {
    
    @State var data: Data
    @State var selectedFavoriteSong: Bool = false
    
    var body: some View {
        HStack {
            Button(action: {
                self.selectedFavoriteSong.toggle()
            }, label: {
                if selectedFavoriteSong {
                    Image(systemName: "suit.heart.fill")
                        .foregroundColor(.red)
                        .padding(.horizontal)

                } else {
                    Image(systemName: "suit.heart")
                        .padding(.horizontal)
                }
            })
            
            Spacer()
            Text("\(data.name1)")
            Spacer()

        }
        .padding(.top)
        
        VStack {
            
            Text(data.name2)
                .font(.title2.smallCaps())
                .fontWeight(.bold)
                .foregroundColor(.primary)
        }
        .padding(.horizontal)
        .multilineTextAlignment(.center)

        Spacer()
        
    }
}

So, I want to connect the parent view and the detail view with some kind of binding property. But there is impossible to connect these two. I can store

@State var selectedFavoriteSong: Bool = false

inside the EnvironmentObject. But when I click favorite, all the items inside the ForEach loop are selected. Please help me on this issue. If you need a full code, the above link will direct to my first post. Thank you.

Answer 1

I'd suggest storing all of your data in an ObservableObject that is owned by the parent view and then can get passed into subviews (either explicitly or via an EnvironmentObject):

class DataSource : ObservableObject {
    @Published var data : [Data] = DataList.dot
    @Published var favoritedItems: Set<UUID> = []
    
    func favoriteBinding(forID id: UUID) -> Binding<Bool> {
        .init {
            self.favoritedItems.contains(id)
        } set: { newValue in
            if newValue {
                self.favoritedItems.insert(id)
            } else {
                self.favoritedItems.remove(id)
            }
        }
    }
}

For example:

struct ParentView : View {
    @StateObject var dataSource = DataSource()
    
    var body: some View {
        VStack {
            Search(dataSource: dataSource)
        }
    }
}

Note that the data source stores a list of IDs that have been favorited. It uses a custom binding that can pass the boolean value down to a detail view:

struct Search: View {

    @ObservedObject var dataSource : DataSource
    
    var body: some View {
        NavigationView {
            ScrollView (.vertical, showsIndicators: false) {
                LazyVStack(alignment: .leading, spacing: 10) {
                    
                    ForEach (dataSource.data, id: \.id) { data in
                        
                        NavigationLink(
                            destination: DetailView(data: data,
                                                    selectedFavoriteSong: dataSource.favoriteBinding(forID: data.id)),
                            label: {
                                Text(data.name1)
                            })

                        }
                    
                    }.padding(.horizontal)
                }
        }
    }
}

struct DetailView: View {
    var data : Data
    @Binding var selectedFavoriteSong : Bool
    
    var body: some View {
        HStack {
            Button(action: {
                self.selectedFavoriteSong.toggle()
            }, label: {
                if self.selectedFavoriteSong {
                    Image(systemName: "suit.heart.fill")
                        .foregroundColor(.red)
                        .padding(.horizontal)

                } else {
                    Image(systemName: "suit.heart")
                        .padding(.horizontal)
                }
            })
            
            Spacer()
            Text("\(data.name1)")
            Spacer()

        }
        .padding(.top)
        
        VStack {
            
            Text(data.name2 ?? "")
                .font(.title2.smallCaps())
                .fontWeight(.bold)
                .foregroundColor(.primary)
        }
        .padding(.horizontal)
        .multilineTextAlignment(.center)

        Spacer()
        
    }
}