List with ForEach in iOS Swift - UI Render Trace

Component - List with ForEach

This UI component shows a vertical list of items using ForEach inside a List. Each item is displayed as a text row. It is like a grocery list where each item is shown one below the other.

Widget Tree

List
└── ForEach
    └── Text

The root is a List that creates a scrollable vertical list. Inside it, ForEach loops over data items. Each item is shown as a Text view in a row.

Render Trace - 3 Steps

Step 1: List

Step 2: ForEach

Step 3: Text

State Change - Re-render

Trigger:Data array changes (e.g., item added or removed)

Before

List shows original items

→

After

List updates to show new items reflecting the changed array

Re-renders:ForEach and its Text children re-render to match updated data

UI Quiz - 3 Questions

What does the ForEach do inside the List?

A It makes the List scroll horizontally

B It creates one Text row for each item in the data array

C It adds buttons to each row

D It changes the font size of the Text

Key Insight

Using List with ForEach is a simple way to show many items in a scrollable list. ForEach loops over your data and creates a UI row for each item. When your data changes, the list updates automatically, making dynamic lists easy to build.

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