# ForEach in SwiftUI

SwiftUI is a declarative way to build user interfaces for Apple platforms. One of its core features is the ForEach view, which allows developers to loop over a collection of data and create a view for each element in that collection. In this blog post, we’ll explore the various ways you can use the ForEach view in SwiftUI.

The code in this post is available [here](https://github.com/xavier7t/iOSDevX/tree/main/iOSDevX/202303-Mar%202023/ForEach%20in%20SwiftUI).

# **Basic Usage of ForEach**

The simplest usage of the ForEach view is to create a view for each element in an array. Here's an example:

```swift
let numbers = [1, 2, 3, 4, 5]

var body: some View {
    List {
        ForEach(numbers, id: \.self) { number in
            Text("\(number)")
        }
    }
}
```

In the example above, we’re creating a view for each element in the `numbers` array. The `id` parameter tells SwiftUI how to uniquely identify each element in the array. In this case, we’re using the `\.self` key path, which means that SwiftUI should use the element itself as its identifier.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1679189140880/94d51bcb-d213-4982-9a22-fa1ed21a86c7.png align="center")

# Using ForEach with Identifiable Data

If the data you’re looping over conforms to the `Identifiable` protocol, you can omit the `id` parameter and SwiftUI will use the element’s identifier automatically. Here’s an example:

```swift
struct Person: Identifiable {
    let id = UUID()
    let name: String
}

let people = [Person(name: "Alice"), Person(name: "Bob"), Person(name: "Charlie")]

var body: some View {
    List {
        ForEach(people) { person in
            Text("\(person.name)")
        }
    }
}
```

In the example above, we’re looping over an array of `Person` objects, which conform to the `Identifiable` protocol. Since the `Person` objects have a unique identifier (`id`), we can omit the `id` parameter in the `ForEach` view.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1679189228105/1b9eb5c3-2b9d-4bf6-b2cf-1c1a33b6dfe5.png align="center")

# **Using ForEach with a Range**

You can also use the `ForEach` view to loop over a range of numbers:

```swift
var body: some View {
    List {
        ForEach(0..<10) { number in
            Text("\(number)")
        }
    }
}
```

In the example above, we’re creating a view for each number in the range `0..<10`.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1679189315146/be7ed8b2-37c1-448d-912c-9edf7d233f4d.png align="center")

# **Using ForEach with a Conditional Statement**

Sometimes you may want to filter the data you’re looping over based on a conditional statement. You can use the `if` statement to achieve this:

```swift
let numbers = [1, 2, 3, 4, 5]

var body: some View {
    List {
        ForEach(numbers, id: \.self) { number in
            if number % 2 == 0 {
                Text("\(number)")
            }
        }
    }
}
```

In the example above, we’re looping over an array of numbers and only creating a view for those that are even.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1679189441079/88182804-e4dd-4051-b578-d1a48547e0a1.png align="center")

# Using ForEach with Indices

If you need to access the index of each element in the array, you can use the `indices` property of the array. Here’s an example:

```swift
struct Person: Identifiable {
    let id = UUID()
    let name: String
}

let people = [Person(name: "Alice"), Person(name: "Bob"), Person(name: "Charlie")]

var body: some View {
    List {
        ForEach(people.indices, id: \.self) { index in
            Text("\(people[index].name)")
        }
    }
}
```

In the example above, we’re using the `indices` property of the `people` array to loop over the indices of each `Person` element. We can then use the `index` parameter to access the corresponding element in the array.

# Shorthand Syntax

In SwiftUI's `ForEach`, the `$0` shorthand syntax refers to the current element being processed in the loop.

This shorthand syntax is commonly used when you want to access the properties of each element in the loop. The `$0` is a placeholder for the current element and you can use dot notation to access its properties.

Here's an example of using the `$0` shorthand syntax in a `ForEach` loop:

```swift
struct ContentView: View {
     struct Person: Identifiable, Hashable {
        let id = UUID()
        let name: String
    }

    let people = [Person(name: "Alice"), Person(name: "Bob"), Person(name: "Charlie")]

    var body: some View {
        List {
            Text("General Syntax: ").bold()
            ForEach(people, id: \.self) { person in
                Text(person.name)
            }
            Text("Shorthand Syntax: ").bold()
            ForEach(people, id: \.self) {
                Text($0.name)
            }
        }
    }
}
```

In the example above, we have an array of `Person` called `people` and we are using `ForEach` to create a `Text` view for each element in the array.

In the first loop, we are using the `name` property of each `person` to display the name, which is the conventional way of using `ForEach`. In the second loop, we are using the `$0` shorthand syntax to directly access the name property without assigning the person instance to a variable first.

Both loops produce the same result, but the second loop is a more concise and readable way of using `ForEach`.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1679190280324/0dfc2832-b626-4092-803b-23d3ed87d84d.png align="center")

# Conclusion

The ForEach view in SwiftUI is a powerful tool for looping over collections of data and creating views dynamically. It can be used to handle a large number of similar views, ie. since a SwiftUI view can contain up to 10 child views, however with `ForEach` we can declare similar views for the items from the same data source as just one view.

That’s all of today’s post. I hope it helps and let me know if it is by leaving a comment. Don’t forget to subscribe to my newsletter if you’d like to receive posts like this via email.

I’ll see you in the next post!