Learn Courses My Dashboard

Difficulty passing info into array that uses .matchedGeometryEffect

I have been working on a list that uses .matchedGeometryEffect to transition between a cardView and popup modal to display a detailView. I can get the effect to work and make sure that I am opening the card that is clicked on but now I am having trouble adding data to the array that generates the cards and the detail view. I may have been staring at it too long because now my mind is muddled. Would love if anyone can suggest how to pass data like [id: 0, name:“card1”] back and forth to the different views.

import SwiftUI


struct RectView: View {
    @Namespace var namespace
    @State var selected: Int?

    var body: some View {
        ZStack {
            VStack {
            
                Text("Resort List")
                ScrollView(.horizontal, showsIndicators: false) {
                    RectList(namespace: namespace, selected: $selected)
                }
                .opacity(selected == nil ? 1 : 0)
                  
            } // << or place here opacity modifier here
            
            if let id = selected {
                ZStack {
                    
                    Color.purple
                        .cornerRadius(8)
                    
                    Text("item number \(id)")
                    
                }
                .frame(width: 400, height: 600)
                .shadow(color: Color.black.opacity(0.2), radius: 5, x: 0, y: 0)
                .matchedGeometryEffect(id: id, in: namespace)
                .onTapGesture {
                    withAnimation{
                        selected = nil
                    }
                }
                
            }

        }
//        .animation(.easeInOut(duration: 1))
    }
            
}


// MARK:  Working cards

struct RectList: View {
    let namespace: Namespace.ID
    @Binding var selected: Int?
 
    var resortArray: [ResortData] = resort
    
    var body: some View {
        LazyHStack {
            ForEach(0..<resorts.count) { item in
                    if item == selected {
                Color.clear     // placeholder to avoid duplicate match id run-time warning
                    .frame(width: 150, height: 200)
                    } else {
                        ZStack {
                            
                            Color.white
                                .cornerRadius(8)
                            VStack{
                                Text("item number \(item)")
                            }
                            
                        }
                        .frame(width: 150, height: 200)
                        .shadow(color: Color.black.opacity(0.2), radius: 5, x: 0, y: 0)
                        .matchedGeometryEffect(id: item, in: namespace)
                        .onTapGesture {
                            withAnimation {
                                selected = item
                            }
                        }
                        
                    } // End if
            } // End for Each
        }
    } // End of View
}