List view basics 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(fruits, id: \.self) { fruit in
      Text(fruit)
    }
  }
}

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

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

C An empty list with no rows

D A single row showing all fruits concatenated as "AppleBananaCherry"

💡 Hint

Think about how List uses the array and the id parameter to create rows.

The List uses the fruits array and creates a row for each fruit string. The id: \.self means each string is unique and used as an identifier.

📝 Syntax

intermediate

Identify the syntax error in this List code

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

iOS Swift

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

A Change List to VStack: VStack(numbers) { number in ... }

B Add id: \.self to List: List(numbers, id: \.self) { number in ... }

C Remove the closure: List(numbers)

D Replace Text with Button: List(numbers) { number in Button("(number)") {} }

💡 Hint

List needs a way to identify each item uniquely when the data is not identifiable by default.

The List initializer requires an id parameter when the data elements do not conform to Identifiable. Adding id: \.self fixes the syntax error.

❓ lifecycle

advanced

What happens when the data array changes in a SwiftUI List?

Given this code, what will happen if the fruits array changes after the view appears?

iOS Swift

struct ContentView: View {
  @State var fruits = ["Apple", "Banana"]
  var body: some View {
    VStack {
      List(fruits, id: \.self) { fruit in
        Text(fruit)
      }
      Button("Add Cherry") {
        fruits.append("Cherry")
      }
    }
  }
}

A The app crashes because fruits is modified inside the view

B The List stays the same and does not show Cherry

C The List updates to show Apple, Banana, and Cherry after tapping the button

D The button does nothing because fruits is a constant

💡 Hint

Think about how @State works in SwiftUI and how views update.

Using @State allows the view to update when fruits changes. Adding Cherry triggers the view to refresh and show the new item.

❓ navigation

advanced

How to navigate to a detail view from a List row?

Which code snippet correctly navigates to a DetailView when a list row is tapped?

iOS Swift

struct ContentView: View {
  let items = ["One", "Two"]
  var body: some View {
    NavigationView {
      List(items, id: \.self) { item in
        // What goes here?
      }
    }
  }
}

A ListRow(item: item).navigate(to: DetailView(item: item))

B Button(action: { DetailView(item: item) }) { Text(item) }

C Text(item).onTapGesture { NavigationLink(destination: DetailView(item: item)) }

D NavigationLink(destination: DetailView(item: item)) { Text(item) }

💡 Hint

NavigationLink wraps the row content to enable navigation.

NavigationLink creates a tappable row that navigates to the destination view when tapped.

🔧 Debug

expert

Why does this List crash with 'Index out of range'?

This code crashes when tapping the Delete button. Why?

iOS Swift

struct ContentView: View {
  @State var fruits = ["Apple", "Banana", "Cherry"]
  var body: some View {
    List {
      ForEach(0..<fruits.count, id: \.self) { index in
        Text(fruits[index])
      }
      .onDelete { indices in
        fruits.remove(atOffsets: indices)
      }
    }
  }
}

A Using a range 0..<fruits.count in ForEach causes index mismatch after deletion

B fruits array is immutable and cannot be modified

C onDelete is not supported inside List

D The id: \.self is missing in ForEach

💡 Hint

Think about how ForEach with a range behaves when the array changes size.

Using a range for ForEach means indices are fixed at creation. After deletion, indices may be invalid causing crash. Using ForEach over the array elements directly avoids this.

Practice

1. What does the List view in SwiftUI primarily do?

easy

A. Displays multiple items vertically and allows scrolling if needed

B. Creates a horizontal stack of buttons

C. Shows a single image on the screen

D. Plays a video in full screen

Solution

1. Step 1: Understand the purpose of List

   The List view is designed to show many items arranged vertically.

2. Step 2: Recognize scrolling behavior

   If the items exceed the screen height, List allows vertical scrolling automatically.

3. Final Answer:

   Displays multiple items vertically and allows scrolling if needed -> Option A

4. Quick Check:

   List shows vertical scrollable items = B [OK]

Hint: List shows vertical scrollable items [OK]

Common Mistakes:

• Confusing List with horizontal stacks
• Thinking List shows only one item
• Assuming List plays media content

2. Which of the following is the correct syntax to create a simple list from an array of strings named fruits?

easy

A. List { fruits }

B. List(fruits) { fruit in Text(fruit) }

C. List(fruits, id: fruit) { Text(fruit) }

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

Solution

1. Step 1: Identify correct List initializer

   For simple arrays, use List(data, id: \.self) to uniquely identify each item.

2. Step 2: Check closure syntax

   The closure receives each item and returns a Text view displaying it.

3. Final Answer:

   List(fruits, id: \.self) { fruit in Text(fruit) } -> Option D

4. Quick Check:

   Use id: \.self for simple arrays = C [OK]

Hint: Use id: \.self for simple array lists [OK]

Common Mistakes:

• Omitting id: \.self causes errors
• Passing id: fruit instead of id: \.self
• Using List without closure for data

3. Given this code snippet, what will be displayed?

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

medium

A. Number: 1, Number: 4, Number: 9

B. Number: 1, Number: 2, Number: 3

C. Number: 2, Number: 4, Number: 6

D. Number: 0, Number: 1, Number: 2

Solution

1. Step 1: Understand the data and transformation

   The array contains 1, 2, 3. Each number is multiplied by 2 in the Text view.

2. Step 2: Calculate displayed values

   1*2=2, 2*2=4, 3*2=6, so the list shows "Number: 2", "Number: 4", "Number: 6".

3. Final Answer:

   Number: 2, Number: 4, Number: 6 -> Option C

4. Quick Check:

   Multiply each number by 2 = A [OK]

Hint: Check how data transforms inside Text closure [OK]

Common Mistakes:

• Ignoring the multiplication inside the string
• Confusing array values with displayed text
• Assuming original numbers are shown

4. What is wrong with this SwiftUI List code?

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

medium

A. Missing id parameter for simple array causes a compile error

B. Text view cannot display strings directly

C. List requires items to be Int type

D. Closure syntax is incorrect

Solution

1. Step 1: Check List initializer requirements

   When using List with simple arrays like [String], you must provide an id parameter to identify each element uniquely.

2. Step 2: Identify missing id parameter

   The code omits id: \.self, so it will cause a compile-time error.

3. Final Answer:

   Missing id parameter for simple array causes a compile error -> Option A

4. Quick Check:

   Simple arrays need id: \.self in List = D [OK]

Hint: Always add id: \.self for simple arrays in List [OK]

Common Mistakes:

• Assuming List infers id automatically
• Thinking Text can't display strings
• Believing List only works with Int arrays

5. You have a custom struct Person conforming to Identifiable with a unique id. How do you create a List to display each person's name?

hard

A. List(people, id: \.name) { person in Text(person.name) }

B. List(people) { person in Text(person.name) }

C. List(people, id: \.self) { person in Text(person.name) }

D. List(people) { Text(person.name) }

Solution

1. Step 1: Understand Identifiable protocol usage

   If Person conforms to Identifiable, List can use the id property automatically without specifying id parameter.

2. Step 2: Use List with closure accessing person.name

   Simply pass people array and provide closure to show Text with person.name.

3. Final Answer:

   List(people) { person in Text(person.name) } -> Option B

4. Quick Check:

   Identifiable lets List infer id automatically = A [OK]

Hint: Use List(people) if Person is Identifiable [OK]

Common Mistakes:

• Adding redundant id parameter when Identifiable is used
• Using wrong key path for id
• Omitting closure parameter name