# Editable List in SwiftUI

In this post, I’m going to demonstrate how you can add editing functionality to a SwiftUI list so that users can delete items or reorder items in the list by drag-and-drop.

The source code of this demo is available [here](https://github.com/xavier7t/DemoEditableList20230221).

# Step 1 - Prepare the data

For this demo, we’re going to use an array of strings. Since it’s going to be removing or ordering items inside it, we need to add a `@State` property wrapper.

So let’s do it in the ContentView.

```swift
struct ContentView: View {
    @State var array: [String] = [
        "🟥",
        "🟧",
        "🟨",
        "🟩",
        "🟦",
        "🟪"
    ]
    var body: some View {
        //......
    }
}
```

# Step 2 - Define the body of ContentView

Now we need to replace the default content in the body property of ContentView with a `List`.

A `NavigationStack` (available after iOS 16) or `NavigationView` (before iOS 16) is needed since we’ll add an `Edit` button in the navigation stack/view toolbar.

Inside the navigation stack (or view), add a list with a `ForEach` element iterates over our array. Inside `ForEach` simply place a Text view with the item value as the text value.

```swift
var body: some View {
    NavigationStack {
        List {
            ForEach(array, id: \.self) { item in
                Text(item)
            }
        }
        .navigationTitle("Editable List")
    }
}
```

# Step 3 - Add an `onDelete` modifier

The `onDelete` modifier will allow an item in a list to be removed from the list on the swipe gesture. Let’s add it after `ForEach` element. Inside the closure, we can use the `remove` method of the Swift array to remove an item at a specific index.

```swift
ForEach(array, id: \.self) { item in
    HStack {
        Text(item)
    }
}
.onDelete { index in
    array.remove(atOffsets: index)
}
```

Now we can see that when you swipe a row in the list from right to left, you’ll get a red delete button. And when you continue to swipe the row all the way to the end, the row will get removed.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1677035806693/2454ccc2-3759-45d5-a88d-854d1ae0f5e3.png align="center")

# Step 4 - Add an `onMove` modifier

Similar to `onDelete`, `onMove` is also a modifier and it’s used to reorder items in a list by drag and drop.

Inside the closure, we can call the `move` method of an array and pass in the index set and index to move an item from the `from` the index and to the `to` index.

```swift
.onMove { from, to in
    array.move(fromOffsets: from, toOffset: to)
}
```

The drag and drop is active on the long press gesture upon a row in the list.

# Step 5 - Edit Button

Apart from deleting the item by swiping and reordering it with a long press and then a drag-and-drop, we can use it Edit button. When the Edit button is tapped, the user can tap on a red icon to delete an item and drag and drop a hamburger icon to move it.

To implement this, simply add a toolbar modifier to the navigation stack or the navigation view. Inside it, declare an `EditButton()` . This is a standard button provided by SwiftUI.

```swift
.toolbar {
    EditButton()
}
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1677036583811/3efa6506-6de9-4ddc-b796-a263b4649ee4.png align="center")

And that’s all for this post. Hope it’s helpful!

If you like posts like this please remember to subscribe to my newsletter.

See you all tomorrow in the next post.