List with ForEach in iOS Swift - Mini App: Build & Ship

Build: Fruits List

This screen shows a list of fruit names using a ForEach loop inside a SwiftUI List.

Target UI

-------------------
| Fruits List     |
-------------------
| * Apple         |
| * Banana        |
| * Cherry        |
| * Date          |
| * Elderberry    |
-------------------

Use a SwiftUI List to display fruit names.

Use ForEach to loop over an array of fruit strings.

Each fruit name should appear as a separate row in the list.

The screen should have a navigation title 'Fruits List'.

Starter Code

iOS Swift

import SwiftUI

struct FruitsListView: View {
    let fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"]

    var body: some View {
        NavigationView {
            // TODO: Add List with ForEach here
            Text("Replace this with the list")
                .navigationTitle("Fruits List")
        }
    }
}

struct FruitsListView_Previews: PreviewProvider {
    static var previews: some View {
        FruitsListView()
    }
}

Task 1

Task 2

Task 3

Solution

iOS Swift

import SwiftUI

struct FruitsListView: View {
    let fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"]

    var body: some View {
        NavigationView {
            List {
                ForEach(fruits, id: \.self) { fruit in
                    Text(fruit)
                }
            }
            .navigationTitle("Fruits List")
        }
    }
}

struct FruitsListView_Previews: PreviewProvider {
    static var previews: some View {
        FruitsListView()
    }
}

We use a NavigationView to get a navigation bar with a title. Inside it, a List displays rows. The ForEach loops over the fruits array. We use id: \.self because the array contains unique strings. Each fruit name is shown in a Text view as a row. This creates a simple scrollable list of fruit names with a title.

Final Result

Completed Screen

-------------------
| Fruits List     |
-------------------
| * Apple         |
| * Banana        |
| * Cherry        |
| * Date          |
| * Elderberry    |
-------------------

User can scroll the list if it grows longer.

The navigation bar shows the title 'Fruits List'.

Stretch Goal

Add a button in the navigation bar that adds a new fruit to the list when tapped.

💡 Hint

Use @State to hold the fruits array and add a Button with a '+' icon in the navigation bar. Update the array inside the button's action.

Practice

1. What is the main purpose of using ForEach inside a SwiftUI List?

easy

A. To style the list items

B. To display multiple views by looping over a collection

C. To handle user input events

D. To create a single static view

Solution

1. Step 1: Understand ForEach role

   ForEach loops over a collection to create views for each item.

2. Step 2: Compare options

   Only To display multiple views by looping over a collection describes this looping and displaying behavior correctly.

3. Final Answer:

   To display multiple views by looping over a collection -> Option B

4. Quick Check:

   ForEach = Loop to display views [OK]

Hint: ForEach repeats views for each item in a list [OK]

Common Mistakes:

• Thinking ForEach creates only one view
• Confusing ForEach with event handling
• Assuming ForEach styles views

2. Which of the following is the correct syntax to create a List with ForEach over an array items of strings in SwiftUI?

easy

A. List { ForEach(items, id: \.index) { item in Text(item) } }

B. List { ForEach(items) { item in Text(item) } }

C. List { ForEach(items, id: \.id) { item in Text(item) } }

D. List { ForEach(items, id: \.self) { item in Text(item) } }

Solution

1. Step 1: Check ForEach syntax

   When iterating over a simple array of strings, use id: \.self to identify each item uniquely.

2. Step 2: Validate options

   List { ForEach(items, id: \.self) { item in Text(item) } } uses correct syntax with id: \.self. List { ForEach(items) { item in Text(item) } } misses the id parameter, causing errors. Options C and D use invalid keys for strings.

3. Final Answer:

   List { ForEach(items, id: \.self) { item in Text(item) } } -> Option D

4. Quick Check:

   ForEach with id: \.self for string arrays [OK]

Hint: Use id: \.self for arrays of simple values [OK]

Common Mistakes:

• Omitting the id parameter causes errors
• Using invalid keys for id on simple arrays
• Confusing id: \.self with id: \.id

3. What will be displayed by this SwiftUI code?

let fruits = ["Apple", "Banana", "Cherry"]

List {
  ForEach(fruits, id: \.self) { fruit in
    Text(fruit)
  }
}

medium

A. A list showing Apple, Banana, Cherry as text rows

B. A list showing numbers 0, 1, 2

C. An empty list with no rows

D. A compile-time error due to missing id

Solution

1. Step 1: Understand the data and ForEach

   The array fruits contains three strings. ForEach loops over them with id: \.self.

2. Step 2: Predict the UI output

   Each string is shown as a Text view inside the list, so the list shows Apple, Banana, and Cherry as rows.

3. Final Answer:

   A list showing Apple, Banana, Cherry as text rows -> Option A

4. Quick Check:

   ForEach over strings shows each string as a row [OK]

Hint: ForEach shows each item as a row in List [OK]

Common Mistakes:

• Expecting numbers instead of strings
• Thinking list will be empty
• Assuming id is missing causes error here

4. Identify the error in this SwiftUI code snippet:

struct ContentView: View {
  let numbers = [1, 2, 3]
  var body: some View {
    List {
      ForEach(numbers) { num in
        Text(\"Number: \(num)\")
      }
    }
  }
}

medium

A. Missing id parameter in ForEach causes a compile error

B. Text view syntax is incorrect

C. List cannot contain ForEach

D. numbers array must be @State

Solution

1. Step 1: Check ForEach usage with array of Int

   ForEach over an array of Int requires an id parameter because Int does not conform to Identifiable.

2. Step 2: Identify the error

   The code misses id: \.self in ForEach, causing a compile-time error.

3. Final Answer:

   Missing id parameter in ForEach causes a compile error -> Option A

4. Quick Check:

   ForEach over Int array needs id: \.self [OK]

Hint: Add id: \.self when ForEach uses non-Identifiable items [OK]

Common Mistakes:

• Assuming ForEach works without id for Int arrays
• Thinking Text syntax is wrong
• Believing List can't contain ForEach

5. You have a list of tasks represented as structs with id and name. How do you correctly display them in a SwiftUI List using ForEach?

hard

A. List { ForEach(tasks, id: \.index) { task in Text(task.name) } }

B. List { ForEach(tasks, id: \.name) { task in Text(task.name) } }

C. List { ForEach(tasks) { task in Text(task.name) } }

D. List { ForEach(tasks, id: \.self) { task in Text(task.name) } }

Solution

1. Step 1: Understand Identifiable protocol

   If the task struct has a unique id property and conforms to Identifiable, ForEach can use the array without specifying id.

2. Step 2: Analyze options

   List { ForEach(tasks) { task in Text(task.name) } } uses ForEach(tasks) without id, which works if tasks conform to Identifiable. Options A, C, and D specify id incorrectly or unnecessarily.

3. Final Answer:

   List { ForEach(tasks) { task in Text(task.name) } } -> Option C

4. Quick Check:

   Use ForEach without id if items are Identifiable [OK]

Hint: If struct is Identifiable, omit id in ForEach [OK]

Common Mistakes:

• Adding id when struct already conforms to Identifiable
• Using wrong property for id
• Using id: \.self on structs without Hashable