@State property wrapper in iOS Swift - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a state variable named count initialized to 0.

iOS Swift

@[1] var count = 0

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

AObservedObject

BState

CBinding

DEnvironmentObject

Attempts:

3 left

💡 Hint

Common Mistakes

Using @Binding instead of @State

Forgetting the '@' symbol

Using @ObservedObject for simple state

The @State property wrapper is used to declare a state variable that SwiftUI monitors for changes.

2fill in blank

medium

Complete the code to update the state variable count by incrementing it by 1 inside the button action.

iOS Swift

Button(action: {
    count [1] 1
}) {
    Text("Increment")
}

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

A+=

B-=

C*=

D/=

Attempts:

3 left

💡 Hint

Common Mistakes

Using '-=' which subtracts instead of adds

Using '*' or '/' operators which multiply or divide

The '+=' operator adds the value on the right to the variable on the left, updating the state.

3fill in blank

hard

Fix the error in the code by completing the declaration of the state variable inside a SwiftUI View struct.

iOS Swift

struct CounterView: View {
    [1] var count = 0

    var body: some View {
        Text("Count: \(count)")
    }
}

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

A@State

Bvar

Clet

D@Published

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'var' without @State causes the UI not to update

Using 'let' which is immutable

Using @Published which is for ObservableObject classes

Inside a View struct, state variables must be marked with @State to allow SwiftUI to track changes.

4fill in blank

hard

Fill in the blank to create a button that toggles a Boolean state variable named isOn.

iOS Swift

@State var isOn = false

Button(action: {
    isOn [1] !isOn
}) {
    Text(isOn ? "On" : "Off")
}

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

A!=

B==

C=

D+=

Attempts:

3 left

💡 Hint

Common Mistakes

Using '==' which is a comparison, not assignment

Using '!=' which is a comparison operator

Using '+=' which is for numeric addition

The '=' operator assigns the negated value of isOn back to isOn, toggling the Boolean state.

5fill in blank

hard

Fill the two blanks to declare a state variable count, increment it in a button, and display it in a Text view.

iOS Swift

struct ContentView: View {
    @[1] var count = 0

    var body: some View {
        VStack {
            Button(action: {
                count [2] 1
            }) {
                Text("Increment")
            }
            Text("Count: \(count)")
        }
    }
}

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

AState

B+=

CStateObject

DObservedObject

Attempts:

3 left

💡 Hint

Common Mistakes

Using @StateObject or @ObservedObject for simple Int state

Using '=' instead of '+=' to increment

Forgetting to mark count with @State

Use @State to declare the variable, '+=' to increment it, and display count in Text. @StateObject and @ObservedObject are for classes, not simple state.

Practice

1. What is the main purpose of the @State property wrapper in SwiftUI?

easy

A. To keep track of data that can change and update the UI automatically

B. To create a constant value that never changes

C. To store data permanently on the device

D. To define a function inside a view

Solution

1. Step 1: Understand @State role

   @State is used to hold data that can change inside a SwiftUI view.

2. Step 2: Connect data change to UI update

   When @State data changes, SwiftUI automatically refreshes the view to show the new data.

3. Final Answer:

   To keep track of data that can change and update the UI automatically -> Option A

4. Quick Check:

   @State updates UI on data change = B [OK]

Hint: Remember: @State means data changes update the screen [OK]

Common Mistakes:

• Thinking @State stores permanent data
• Confusing @State with constants
• Using @State for functions

2. Which of the following is the correct way to declare a @State variable for an integer counter in SwiftUI?

easy

A. @State let counter: Int = 0

B. var @State counter: Int = 0

C. private var @State counter = 0

D. @State private var counter = 0

Solution

1. Step 1: Check correct @State syntax

   The correct syntax places @State before the variable declaration and usually uses private for encapsulation.

2. Step 2: Identify valid declaration

   @State private var counter = 0 uses '@State private var counter = 0' which is the recommended and correct form.

3. Final Answer:

   @State private var counter = 0 -> Option D

4. Quick Check:

   @State before var, private optional = D [OK]

Hint: Always put @State before 'var' and use private if needed [OK]

Common Mistakes:

• Placing @State after var
• Missing var keyword
• Using let instead of var

3. Consider this SwiftUI code snippet:

struct ContentView: View {
  @State private var count = 0
  var body: some View {
    VStack {
      Text("Count: \(count)")
      Button("Add") {
        count += 1
      }
    }
  }
}

What happens when the "Add" button is tapped?

medium

A. The app crashes because count is private

B. The count increases but the Text does not update

C. The count increases by 1 and the Text updates to show the new count

D. Nothing happens because @State variables cannot change

Solution

1. Step 1: Understand @State behavior on change

   When the button increments count, the @State variable changes.

2. Step 2: UI updates automatically

   SwiftUI detects the change and refreshes the Text to show the new count value.

3. Final Answer:

   The count increases by 1 and the Text updates to show the new count -> Option C

4. Quick Check:

   @State change triggers UI update = C [OK]

Hint: @State changes always refresh the UI automatically [OK]

Common Mistakes:

• Thinking private stops UI updates
• Assuming UI won't refresh on state change
• Believing @State variables are immutable

4. What is wrong with this SwiftUI code?

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

medium

A. TextField cannot bind to @State variables

B. @State variables must have an initial value

C. The body property must return a Button, not TextField

D. @State cannot be used inside a struct

Solution

1. Step 1: Check @State variable declaration

   @State variables must be initialized with a value when declared.

2. Step 2: Identify missing initial value

   Here, 'text' has no initial value, causing a compile error.

3. Final Answer:

   @State variables must have an initial value -> Option B

4. Quick Check:

   @State needs initial value = A [OK]

Hint: Always give @State variables a starting value [OK]

Common Mistakes:

• Forgetting to initialize @State variables
• Thinking @State can't bind to TextField
• Confusing struct rules with @State usage

5. You want to create a toggle switch that changes a text label between "On" and "Off" using @State. Which code snippet correctly implements this behavior?

hard

A. struct ContentView: View {
@State private var isOn = false
var body: some View {
VStack {
Toggle("Switch", isOn: $isOn)
Text(isOn ? "On" : "Off")
}
}
}

B. struct ContentView: View {
var isOn = false
var body: some View {
VStack {
Toggle("Switch", isOn: $isOn)
Text(isOn ? "On" : "Off")
}
}
}

C. struct ContentView: View {
@State var isOn: Bool
var body: some View {
VStack {
Toggle("Switch", isOn: $isOn)
Text(isOn ? "On" : "Off")
}
}
}

D. struct ContentView: View {
@State private var isOn = false
var body: some View {
VStack {
Toggle("Switch", isOn: isOn)
Text(isOn ? "On" : "Off")
}
}
}

Solution

1. Step 1: Check @State declaration and initialization

   struct ContentView: View { @State private var isOn = false var body: some View { VStack { Toggle("Switch", isOn: $isOn) Text(isOn ? "On" : "Off") } } } correctly declares @State private var isOn = false, initializing the state.

2. Step 2: Verify Toggle binding

   The Toggle uses $isOn to bind to the state variable, enabling UI updates on toggle.

3. Step 3: Confirm Text updates with state

   The Text view uses a ternary to show "On" or "Off" based on isOn value.

4. Final Answer:

   code correctly implements the toggle and text update -> Option A

5. Quick Check:

   @State with $ binding updates UI = A [OK]

Hint: Use @State with $ for binding Toggle to update UI [OK]

Common Mistakes:

• Not initializing @State variable
• Missing $ for binding in Toggle
• Declaring @State without initial value