SwiftUI: onDelete doesn't update UI correctly - swiftui

Question

When I delete an element of an array using onDelete(), it removes the correct item in the data but removes the last item on the UI. I saw this answer but I am already using what it recommends. Any advice?
struct ContentView: View {
#State var items = ["One", "Two", "Three"]
var body: some View {
Form{
ForEach(items.indices, id:\.self){ itemIndex in
let item = self.items[itemIndex]
EditorView(container: self.$items, index: itemIndex, text: item)
}.onDelete(perform: { indexSet in
self.items.remove(atOffsets: indexSet)
})
}
}
}
Here is the EditorView struct:
struct EditorView : View {
var container: Binding<[String]>
var index: Int
#State var text: String
var body: some View {
TextField("Type response here", text: self.$text, onCommit: {
self.container.wrappedValue[self.index] = self.text
})
}
}

Answer 1

Your ForEach is looping over the indices of your array, so that is what SwiftUI is using to identify them. When you delete an item, you have one fewer index for the array, so SwiftUI interprets that as the last one has been deleted.
To do this correctly, you should be looping over a list of Identifiable items that have a unique id. Here I've created a struct called MyItem which holds the original String and a uniquely generated id. I use .map(MyItem.init) to convert the items into a [MyItem].
Also, your code needs the index in the loop, so loop over Array(items.enumerated()) which will give you an array of (offset, element) tuples. Then tell SwiftUI to use \.element.id as the id.
Note that EditorView now takes an Array of MyItem.
With these changes, SwiftUI will be able to identify the item you have deleted from the list and update the UI correctly.
struct MyItem: Identifiable {
var name: String
let id = UUID()
}
struct ContentView: View {
#State var items = ["One", "Two", "Three"].map(MyItem.init)
var body: some View {
Form{
ForEach(Array(items.enumerated()), id: \.element.id) { index, item in
EditorView(container: self.$items, index: index, text: item.name)
}.onDelete(perform: { indexSet in
self.items.remove(atOffsets: indexSet)
})
}
}
}
struct EditorView : View {
var container: Binding<[MyItem]>
var index: Int
#State var text: String
var body: some View {
TextField("Type response here", text: self.$text, onCommit: {
self.container.wrappedValue[self.index].name = self.text
})
}
}