sheet inside ForEach doesn't loop over id's - ios

Question

Each link has an id, the output I get when I click on the button is the wrong id, it repeats the first id on the first 4 buttons and then the others are random.
struct PricesList: View {
#ObservedObject var viewModel = ViewModel()
#State var isSheetPresented = false
var body: some View{
NavigationView{
ScrollView {
LazyVGrid(columns: gridLayout, spacing: 15, content: {
ForEach(viewModel.items, id: \.id) { item in
VStack(alignment: .leading, spacing: 5){
Button(action: {
self.isSheetPresented.toggle()
}, label: {
Image(item.imageUrl)
.resizable()
.scaledToFit()
.padding(10)
}).sheet(isPresented: $isSheetPresented, content: {
WebView(url: item.link)
})
}//:VSTACK
.scaledToFit()
.padding()
.background(Color.white.cornerRadius(12))
.background(RoundedRectangle(cornerRadius: 12).stroke(Color.gray, lineWidth: 1))
}//: LOOP FOR EACH
}).padding(5)
.onAppear(perform: {
viewModel.loadData()
viewModel.postData()
})
}
.navigationBarHidden(true)
}//: NAVIGATION VIEW
} //: BODY
}

Answer 1

You have sheet for each item in your list, and all of them are getting isSheetPresented value. Which one will be displayed is undefined
Instead you need to store selectedItem and pass it to single sheet, like this:
struct ContentView: View {
#ObservedObject var viewModel = ViewModel()
#State var selectedItem: Item?
var body: some View{
NavigationView{
ScrollView {
LazyVGrid(columns: gridLayout, spacing: 15, content: {
ForEach(viewModel.items, id: \.id) { item in
VStack(alignment: .leading, spacing: 5){
Button(action: {
selectedItem = item
}, label: {
Image(item.imageUrl)
.resizable()
.scaledToFit()
.padding(10)
})
}//:VSTACK
.scaledToFit()
.padding()
.background(Color.white.cornerRadius(12))
.background(RoundedRectangle(cornerRadius: 12).stroke(Color.gray, lineWidth: 1))
}//: LOOP FOR EACH
}).padding(5)
.onAppear(perform: {
viewModel.loadData()
viewModel.postData()
})
.sheet(item: $selectedItem, content: { selectedItem in
WebView(url: selectedItem.link)
})
}
.navigationBarHidden(true)
}//: NAVIGATION VIEW
} //: BODY
}