List with ForEach in iOS Swift - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a list showing numbers from 1 to 5 using ForEach.

iOS Swift

List {
  ForEach(1...5, id: \.[1]) { number in
    Text("Number \(number)")
  }
}

Drag options to blanks, or click blank then click option'

Aself

Bid

Cnumber

Drange

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name that is not defined as id.

Leaving out the id parameter causing errors.

The id: \.self\ tells SwiftUI to use each number itself as a unique identifier.

2fill in blank

medium

Complete the code to display a list of fruit names using ForEach.

iOS Swift

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

List {
  ForEach(fruits, id: \.[1]) { fruit in
    Text(fruit)
  }
}

Drag options to blanks, or click blank then click option'

Aindex

Bfruit

Cself

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name that is not defined as id.

Omitting the id parameter causing errors.

For arrays of strings, id: \.self\ uses each string as a unique identifier.

3fill in blank

hard

Fix the error in the ForEach loop by completing the id parameter correctly.

iOS Swift

struct ContentView: View {
  let names = ["Anna", "Bob", "Cara"]

  var body: some View {
    List {
      ForEach(names, id: \.[1]) { name in
        Text(name)
      }
    }
  }
}

Drag options to blanks, or click blank then click option'

Aself

Bname

Cid

Dindex

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name that is not defined.

Using id or index which are not valid here.

Using id: \.self\ tells SwiftUI to use each string as its own unique id.

4fill in blank

hard

Fill both blanks to create a list of numbers squared using ForEach.

iOS Swift

List {
  ForEach(1...3, id: \.[1]) { num in
    Text("Square: \(num [2] num)")
  }
}

Drag options to blanks, or click blank then click option'

Aself

B*

C+

D-

Attempts:

3 left

💡 Hint

Common Mistakes

Using addition or subtraction instead of multiplication.

Using a wrong id parameter.

id: \.self\ uses the number itself as id, and * multiplies the number by itself to get the square.

5fill in blank

hard

Fill all three blanks to create a list showing names in uppercase using ForEach.

iOS Swift

let names = ["alice", "bob", "carol"]

List {
  ForEach(names, id: \.[1]) { name in
    Text(name.[2]().[3]())
  }
}

Drag options to blanks, or click blank then click option'

Aself

Buppercased

CtrimmingCharacters

Dlowercased

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercased() instead of uppercased().

Forgetting to call the method with parentheses.

id: \.self\ uses each string as id, uppercased() converts to uppercase, and the last () calls the method properly.

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