@Binding for child communication in iOS Swift - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a binding variable in the child view.

iOS Swift

struct ChildView: View {
  @[1] var isOn: Bool

  var body: some View {
    Toggle("Switch", isOn: $isOn)
  }
}

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

AObservedObject

BBinding

CState

DEnvironmentObject

Attempts:

3 left

💡 Hint

Common Mistakes

Using @State instead of @Binding in the child view.

Forgetting the $ prefix when passing the binding.

Use @Binding to create a two-way connection from the parent to the child view.

2fill in blank

medium

Complete the code to pass a binding from the parent to the child view.

iOS Swift

struct ParentView: View {
  @State private var isOn = false

  var body: some View {
    ChildView(isOn: [1])
  }
}

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

A$isOn

BisOn

C&isOn

D*isOn

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the variable without the $ prefix.

Using & or * which are not valid in SwiftUI for bindings.

Use $ to pass a binding of the state variable to the child.

3fill in blank

hard

Fix the error in the child view declaration to correctly use @Binding.

iOS Swift

struct ChildView: View {
  @Binding var isOn: Bool

  var body: some View {
    Toggle("Switch", isOn: $[1])
  }
}

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

Aself.isOn

BisOnBinding

CbindingIsOn

DisOn

Attempts:

3 left

💡 Hint

Common Mistakes

Not declaring the variable with @Binding.

Using a different name inside the $ prefix.

The toggle needs a binding, so the variable must be declared with @Binding and used with $isOn.

4fill in blank

hard

Fill both blanks to create a child view that toggles a binding boolean and shows text based on it.

iOS Swift

struct ChildView: View {
  @[1] var isOn: Bool

  var body: some View {
    VStack {
      Toggle("Switch", isOn: $isOn)
      Text(isOn ? [2] : "Off")
    }
  }
}

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

ABinding

B"On"

C"Enabled"

DState

Attempts:

3 left

💡 Hint

Common Mistakes

Using @State instead of @Binding for the property wrapper.

Using a string other than "On" for the true case.

The child uses @Binding for the boolean and shows "On" text when true.

5fill in blank

hard

Fill all three blanks to create a parent view with a state boolean, passing it as a binding to a child view.

iOS Swift

struct ParentView: View {
  @[1] private var isOn = false

  var body: some View {
    [2](isOn: [3])
  }
}

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

AState

BChildView

C$isOn

DBinding

Attempts:

3 left

💡 Hint

Common Mistakes

Using @Binding instead of @State in the parent.

Passing isOn without $ to the child.

Using wrong child view name.

The parent owns the state with @State, uses ChildView as child, and passes $isOn as binding.

Practice

1. What is the main purpose of using @Binding in SwiftUI child views?

easy

A. To prevent child views from accessing any parent data

B. To allow child views to read and modify a parent's state directly

C. To pass data only from child to parent without updates

D. To create a new independent state inside the child view

Solution

1. Step 1: Understand @Binding role

   @Binding creates a two-way connection allowing child views to read and write to a parent's state.

2. Step 2: Compare with other options

   Other options describe independent state or one-way data flow, which @Binding does not do.

3. Final Answer:

   To allow child views to read and modify a parent's state directly -> Option B

4. Quick Check:

   @Binding = two-way parent-child state link [OK]

Hint: Remember @Binding syncs child state with parent state [OK]

Common Mistakes:

• Confusing @Binding with @State creating independent state
• Thinking @Binding only passes data one-way
• Assuming @Binding prevents child from modifying data

2. Which of the following is the correct way to pass a binding from a parent to a child view in SwiftUI?

easy

A. ChildView($binding: $parentState)

B. ChildView(binding: parentState)

C. ChildView($binding: parentState)

D. ChildView(binding: $parentState)

Solution

1. Step 1: Identify correct binding syntax

   In SwiftUI, to pass a binding, use the $ prefix on the parent's @State variable.

2. Step 2: Validate options

   ChildView(binding: $parentState) correctly uses $parentState to pass a binding; others misuse $ or omit it.

3. Final Answer:

   ChildView(binding: $parentState) -> Option D

4. Quick Check:

   Use $ to pass binding from parent [OK]

Hint: Pass bindings with $ prefix before parent state [OK]

Common Mistakes:

• Forgetting the $ prefix when passing binding
• Using $ incorrectly in parameter name
• Passing state value instead of binding

3. Given this code snippet, what will be the output when the button is tapped?

struct ParentView: View {
  @State private var count = 0
  var body: some View {
    VStack {
      Text("Count: \(count)")
      ChildView(count: $count)
    }
  }
}

struct ChildView: View {
  @Binding var count: Int
  var body: some View {
    Button("Increment") {
      count += 1
    }
  }
}

medium

A. The app crashes due to missing @State in ChildView

B. The count text never changes after tapping the button

C. The count text updates and shows incremented value each tap

D. The button does not respond to taps

Solution

1. Step 1: Understand @Binding effect

   The ChildView uses @Binding to modify the parent's count state directly.

2. Step 2: Predict UI update

   When the button increments count, the parent's Text updates to show the new value.

3. Final Answer:

   The count text updates and shows incremented value each tap -> Option C

4. Quick Check:

   @Binding syncs changes to parent state [OK]

Hint: Child @Binding changes update parent UI automatically [OK]

Common Mistakes:

• Thinking @Binding requires @State in child too
• Assuming UI won't update without explicit refresh
• Confusing @Binding with simple value passing

4. Identify the error in this SwiftUI code using @Binding:

struct ParentView: View {
  @State private var text = "Hello"
  var body: some View {
    ChildView(text: text)
  }
}

struct ChildView: View {
  @Binding var text: String
  var body: some View {
    TextField("Enter", text: $text)
  }
}

medium

A. Parent passes text without $ prefix, so binding is missing

B. ChildView should use @State instead of @Binding

C. TextField cannot bind to @Binding variables

D. No error, code works correctly

Solution

1. Step 1: Check how binding is passed

   Parent passes text instead of $text, so ChildView receives a value, not a binding.

2. Step 2: Understand @Binding requirement

   ChildView expects a binding, so missing $ causes a type mismatch error.

3. Final Answer:

   Parent passes text without $ prefix, so binding is missing -> Option A

4. Quick Check:

   Pass binding with $ to match @Binding [OK]

Hint: Always use $ when passing @State to @Binding parameter [OK]

Common Mistakes:

• Omitting $ when passing binding
• Confusing @State and @Binding roles
• Assuming TextField works without binding

5. You want a child view to toggle a Boolean value in the parent and also perform a side effect when toggled. Which approach correctly uses @Binding and triggers the side effect in the parent?

struct ParentView: View {
  @State private var isOn = false

  var body: some View {
    ChildView(isOn: $isOn)
      .onChange(of: isOn) { newValue in
        print("Toggled to \(newValue)")
      }
  }
}

struct ChildView: View {
  @Binding var isOn: Bool

  var body: some View {
    Toggle("Switch", isOn: $isOn)
  }
}

hard

A. This code correctly uses @Binding and triggers side effect on toggle

B. Side effect won't trigger because onChange must be inside ChildView

C. Toggle should not use $isOn, just isOn without $

D. Parent must pass isOn without $ to ChildView

Solution

1. Step 1: Verify @Binding usage

   Parent passes binding with $isOn, ChildView uses @Binding and Toggle binds to $isOn correctly.

2. Step 2: Check side effect trigger

   Parent uses .onChange(of: isOn) to run code when isOn changes, which works as expected.

3. Final Answer:

   This code correctly uses @Binding and triggers side effect on toggle -> Option A

4. Quick Check:

   @Binding + onChange in parent = correct pattern [OK]

Hint: Use onChange in parent to react to @Binding changes [OK]

Common Mistakes:

• Placing onChange inside child instead of parent
• Passing state without $ causing binding errors
• Using Toggle without binding variable