@Binding for child communication in iOS Swift

Introduction

@Binding lets a child view read and write a value owned by its parent. This helps keep data in sync between views.

When a parent view owns some data but a child view needs to update it.

When you want to share state between views without duplicating it.

When building forms where child inputs change parent data.

When you want a child view to control a toggle or slider that affects parent state.

Syntax

iOS Swift

struct ChildView: View {
  @Binding var isOn: Bool

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

Use @Binding in the child to declare a variable that links to the parent's state.

Pass the binding from the parent using the $ prefix.

Examples

The parent owns the isOn state and passes a binding to the child.

iOS Swift

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

  var body: some View {
    ChildView(isOn: $isOn)
  }
}

The child can modify the parent's count state through the binding.

iOS Swift

struct ChildView: View {
  @Binding var count: Int

  var body: some View {
    Button("Increment") {
      count += 1
    }
  }
}

Sample App

This app shows a toggle switch controlled by the child view. The parent displays the current state text. Changing the toggle updates the parent's state instantly.

iOS Swift

import SwiftUI

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

  var body: some View {
    VStack {
      Text(isOn ? "Switch is ON" : "Switch is OFF")
        .font(.title)
        .padding()
      ChildView(isOn: $isOn)
        .padding()
    }
  }
}

struct ChildView: View {
  @Binding var isOn: Bool

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

struct ContentView: View {
  var body: some View {
    ParentView()
  }
}

Important Notes

Always prefix the parent's state with $ when passing to a @Binding variable.

Bindings keep data in sync both ways: child changes update parent and parent changes update child.

Use @State in the parent and @Binding in the child for this pattern.

Summary

@Binding lets child views read and write parent state.

Pass bindings from parent to child using $ prefix.

This keeps data synchronized between views easily.

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