How to edit an item in a list using NavigationLink?

Question

I am looking for some guidance with SwiftUI please.

I have a view showing a simple list with each row displaying a "name" string. You can add items to the array/list by clicking on the trailing navigation bar button. This works fine. I would now like to use NavigationLink to present a new "DetailView" in which I can edit the row's "name" string. I'm struggling with how to use a binding in the detailview to update the name.

I've found plenty of tutorials online on how to present data in the new view, but nothing on how to edit the data. Thanks in advance.

ContentView:

struct ListItem: Identifiable {
    let id = UUID()
    let name: String
}

class MyListClass: ObservableObject {
    @Published var items = [ListItem]()
}

struct ContentView: View {

    @ObservedObject var myList = MyListClass()

    var body: some View {
        NavigationView {
            List {
                ForEach(myList.items) { item in
                    NavigationLink(destination: DetailView(item: item)) {
                        Text(item.name)
                    }
                }
            }
            .navigationBarItems(trailing:
                Button(action: {
                    let item = ListItem(name: "Test")
                    self.myList.items.append(item)
                }) {
                    Image(systemName: "plus")
                }
            )
        }
    }
}

DetailView

struct DetailView: View {

    var item: ListItem

    var body: some View {
        TextField("", text: item.name)
    }
}

score 12 · Accepted Answer · edited Aug 23 '22 at 10:14

The main idea that you pass in DetailsView not item, which is copied, because it is a value, but binding to the corresponding item in your view model.

Here is a demo with your code snapshot modified to fulfil the requested behavior:

struct ListItem: Identifiable, Equatable {
    var id = UUID()
    var name: String
}

class MyListClass: ObservableObject {
    @Published var items = [ListItem]()
}

struct ContentView: View {

    @ObservedObject var myList = MyListClass()

    var body: some View {
        NavigationView {
            List {
                ForEach(myList.items) { item in
                    // Pass binding to item into DetailsView
                    NavigationLink(destination: DetailView(item: self.$myList.items[self.myList.items.firstIndex(of: item)!])) {
                        Text(item.name)
                    }
                }
            }
            .navigationBarItems(trailing:
                Button(action: {
                    let item = ListItem(name: "Test")
                    self.myList.items.append(item)
                }) {
                    Image(systemName: "plus")
                }
            )
        }
    }
}

struct DetailView: View {

    @Binding var item: ListItem
    
    var body: some View {
        TextField("", text: self.$item.name)
    }
}

THANK YOUU! I just spent 2 days until I realised that doing a `ForEach(0.. — thisIsTheFoxe, Aug 06 '20 at 10:08
This is still one of the only places I could find online that explains this concept clearly and with a simple example. Solved my problem and saved me more hours of searching. — Steve Macdonald, Dec 17 '20 at 02:34
This produces `Cannot assign through subscript: subscript is get-only` — jeanmartin, Jan 23 '21 at 15:00

How to edit an item in a list using NavigationLink?

1 Answers1

Linked