List with ForEach in iOS Swift - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What will this SwiftUI List display?

Consider this SwiftUI code snippet. What will the List show when the app runs?

iOS Swift

struct ContentView: View {
  let fruits = ["Apple", "Banana", "Cherry"]
  var body: some View {
    List {
      ForEach(fruits, id: \.self) { fruit in
        Text(fruit)
      }
    }
  }
}

A A list showing numbers 0, 1, 2 instead of fruit names.

B A list showing Apple, Banana, and Cherry as separate rows.

C A list showing only Apple because ForEach stops after first item.

D The code will not compile due to missing id parameter.

💡 Hint

Think about what ForEach does with an array and the id parameter.

ForEach iterates over the fruits array and creates a Text view for each fruit. The id: \.self tells SwiftUI to use the string itself as a unique identifier. So the List shows Apple, Banana, and Cherry each on its own row.

📝 Syntax

intermediate

Identify the syntax error in this ForEach usage

Which option correctly fixes the syntax error in this SwiftUI code?

iOS Swift

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

A Remove the closure parameter: ForEach(numbers) { Text("\(number)") }

B Change numbers to a Set: ForEach(Set(numbers)) { number in ... }

C Add id: \.self to ForEach: ForEach(numbers, id: \.self) { number in ... }

D Replace List with VStack: VStack { ForEach(numbers) { number in ... } }

💡 Hint

ForEach needs a way to identify each item uniquely when using simple arrays.

When using ForEach with an array of simple values like Int, you must provide an id parameter to uniquely identify each element. Adding id: \.self fixes the syntax error.

❓ lifecycle

advanced

What happens if the data array changes in a ForEach List?

If the array used in ForEach changes (items added or removed), what does SwiftUI do to the List?

A SwiftUI updates the List to reflect the new array contents automatically.

B The List does not update until the app restarts.

C The List duplicates old and new items causing visual glitches.

D SwiftUI crashes because ForEach cannot handle dynamic data.

💡 Hint

Think about how SwiftUI reacts to state changes.

SwiftUI watches the data used in ForEach. When the array changes, SwiftUI updates the List UI automatically to match the new data.

🔧 Debug

advanced

Why does this ForEach cause a runtime crash?

This code crashes at runtime. What is the cause?

iOS Swift

struct ContentView: View {
  let items = ["A", "B", "A"]
  var body: some View {
    List {
      ForEach(items, id: \.self) { item in
        Text(item)
      }
    }
  }
}

A The array has duplicate items used as id, causing duplicate id error.

B ForEach cannot use strings as id, only integers.

C List requires a section header, missing here.

D Text views must have unique tags, missing here.

💡 Hint

Check the uniqueness of the id values.

Using id: \.self means each item must be unique. The array has two "A" strings, causing duplicate id error and crash.

🧠 Conceptual

expert

Why use ForEach inside a List instead of just List with data?

Which reason best explains why developers use ForEach inside a List in SwiftUI?

A Using ForEach inside List is required to enable scrolling.

B List cannot display arrays directly without ForEach.

C ForEach improves app performance by caching views automatically.

D ForEach allows more control over each row’s view and supports complex layouts inside List.

💡 Hint

Think about flexibility in building UI rows.

ForEach lets you customize each row’s content and layout inside a List. List alone can display simple data but ForEach is needed for complex or dynamic row views.

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