NavigationLink is passing a incorrect record in array to another view

Question

                    ForEach(bookData){ bookDetail in
                        Button(action: {
                            //Page number update
                        }) {
                            BookView(book: bookDetail)
                        }
                        .foregroundColor(.primary)
                        .background(
                            NavigationLink(destination: EditBook(book: bookDetail), isActive: $showEdit){
                               EmptyView()
                           }
                        )
                        .contextMenu{
                            Button(action: {
                                self.showEdit = true
                            }) {
                                Label("Edit", systemImage: "pencil")
                            }
                            Button(action: {
                                //Delete action
                            }) {
                                Label("Delete", systemImage: "trash")
                            }
                        }
                    }

The navigationLink that goes to EditBook is sending the wrong view. In my array, that is running off a json file, when I try to send the second record, it seems to pass the first one because the EditBook view is showing data from the first record. Also more what's more peculiar is the fact the first record passes the third record's data (there are only 3 records).

Have no idea what's happening, I though it might be because the id's of each record start from 1 but I changed it to zero and it didn't work.

ps. I have no idea what's with the code blocks formatting

Answer 1

Ah.. with ForEach you should do that, because you activate all links in container by one state, instead you have to make them unique for each row/cell, using different link constructor, like below (there might be also needed to conform your bookDetail type, I assumed it is Book, to Hashable)

@State private var selectedBook: Book? = nil

...

    ForEach(bookData){ bookDetail in
        Button(action: {
            //Page number update
        }) {
            BookView(book: bookDetail)
        }
        .foregroundColor(.primary)
        .background(
            NavigationLink(destination: EditBook(book: bookDetail), tag: bookDetail, selection: $selectedBook) {
               EmptyView()
           }
        )
        .contextMenu{
            Button(action: {
                self.selectedBook = bookDetail
            }) {
                Label("Edit", systemImage: "pencil")
            }
            Button(action: {
                //Delete action
            }) {
                Label("Delete", systemImage: "trash")
            }
        }
    }