Built-in property wrappers (@State, @Published) in Swift - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a state variable in a SwiftUI view.

Swift

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

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

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

A@State

B@Published

C@Binding

D@ObservedObject

Attempts:

3 left

💡 Hint

Common Mistakes

Using @Published inside a View struct instead of @State.

Forgetting the @ symbol before the property wrapper.

Use @State to declare a local state variable inside a SwiftUI view.

2fill in blank

medium

Complete the code to declare a published property in an ObservableObject class.

Swift

class Counter: ObservableObject {
    [1] var value = 0
}

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

A@Published

B@EnvironmentObject

C@Binding

D@State

Attempts:

3 left

💡 Hint

Common Mistakes

Using @State inside a class instead of @Published.

Not conforming the class to ObservableObject.

Use @Published to mark properties that notify views when they change in ObservableObject classes.

3fill in blank

hard

Fix the error in the code by choosing the correct property wrapper for a view model property.

Swift

struct ContentView: View {
    @StateObject var model = Counter()

    var body: some View {
        Text("Value: \(model.[1])")
    }
}

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

A@State

Bvalue

C@Published

Dvalue.value

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to use @Published or @State when accessing the property.

Using nested property names incorrectly.

Access the published property directly by its name without property wrappers in the view body.

4fill in blank

hard

Fill both blanks to declare a published property and update it inside a class.

Swift

class TimerModel: ObservableObject {
    [1] var seconds = 0

    func tick() {
        seconds [2] 1
    }
}

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

A@Published

B=

C+=

D@State

Attempts:

3 left

💡 Hint

Common Mistakes

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

Using @State inside a class instead of @Published.

Use @Published to mark the property and '+=' to increment it.

5fill in blank

hard

Fill all three blanks to declare a state variable, update it, and display it in a SwiftUI view.

Swift

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

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

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

A@State

B+

C+=

D@Published

Attempts:

3 left

💡 Hint

Common Mistakes

Using @Published instead of @State in a view.

Using '=' instead of '+=' to update the variable.

Declare count with @State, increment it with '+=' and add 1 with '+'.

Practice

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

easy

A. To mark properties in a class that notify other objects when changed

B. To create a constant value that never changes

C. To store local, simple data inside a view and update the UI when it changes

D. To handle network requests asynchronously

Solution

1. Step 1: Understand what @State does

   @State is used to keep simple, local data inside a SwiftUI view.

2. Step 2: Recognize its effect on UI

   When the @State data changes, SwiftUI automatically updates the view to reflect the new data.

3. Final Answer:

   To store local, simple data inside a view and update the UI when it changes -> Option C

4. Quick Check:

   @State manages local view data = B [OK]

Hint: Remember: @State is for local view data that changes [OK]

Common Mistakes:

• Confusing @State with @Published
• Thinking @State is for class properties
• Assuming @State handles network or async tasks

2. Which of the following is the correct way to declare a @Published property inside a Swift class?

easy

A. struct MyStruct { @State var count: Int = 0 }

B. struct MyStruct { @Published var count: Int = 0 }

C. class MyClass { @State var count: Int = 0 }

D. class MyClass { @Published var count: Int = 0 }

Solution

1. Step 1: Identify where @Published can be used

   @Published is used inside classes that conform to ObservableObject, not structs.

2. Step 2: Check syntax correctness

   class MyClass { @Published var count: Int = 0 } correctly declares a class with a @Published property and initializes it.

3. Final Answer:

   class MyClass { @Published var count: Int = 0 } -> Option D

4. Quick Check:

   @Published used in classes = A [OK]

Hint: Use @Published only inside classes, not structs [OK]

Common Mistakes:

• Using @Published in structs
• Confusing @State with @Published
• Missing var keyword or initialization

3. Consider the following SwiftUI code snippet:

class Counter: ObservableObject {
    @Published var value = 0
}

struct ContentView: View {
    @StateObject var counter = Counter()
    var body: some View {
        VStack {
            Text("Count: \(counter.value)")
            Button("Increment") {
                counter.value += 1
            }
        }
    }
}

What will be displayed after tapping the "Increment" button twice?

medium

A. Count: 0

B. Count: 2

C. Count: 1

D. Count: 3

Solution

1. Step 1: Understand the initial state

   The Counter class starts with value = 0. The view shows "Count: 0" initially.

2. Step 2: Analyze button action and updates

   Each tap on "Increment" increases counter.value by 1. After two taps, value becomes 2, and the UI updates automatically.

3. Final Answer:

   Count: 2 -> Option B

4. Quick Check:

   2 increments update value to 2 [OK]

Hint: Each button tap adds 1; count updates automatically [OK]

Common Mistakes:

• Forgetting @Published triggers UI update
• Assuming @StateObject resets value
• Counting taps incorrectly

4. Identify the error in this SwiftUI code snippet:

class Model: ObservableObject {
    @Published var text: String
    init() {}
}

struct ViewContent: View {
    @StateObject var model = Model()
    var body: some View {
        Text(model.text)
    }
}

medium

A. Missing initial value for @Published property 'text' in Model

B. Cannot use @StateObject with ObservableObject classes

C. Text view cannot display a String property

D. Model class should be a struct

Solution

1. Step 1: Check property initialization

   The @Published property text is declared but not initialized, and the init() is empty.

2. Step 2: Understand Swift requirement for properties

   All non-optional properties must have an initial value or be initialized in the constructor. Here, text lacks both.

3. Final Answer:

   Missing initial value for @Published property 'text' in Model -> Option A

4. Quick Check:

   Uninitialized property causes error = A [OK]

Hint: Always initialize @Published properties or provide init values [OK]

Common Mistakes:

• Assuming @StateObject can't be used with ObservableObject
• Thinking Text can't display String
• Believing Model must be a struct

5. You want to create a SwiftUI app where a view shows a user's name that can be edited in a separate view. Which combination of property wrappers should you use to ensure the UI updates correctly when the name changes?

hard

A. Use @State in the main view and @Published in a shared ObservableObject class

B. Use @Published in both views

C. Use @State in both views

D. Use @StateObject in the editing view only

Solution

1. Step 1: Understand data sharing between views

   When multiple views need to share and update data, use an ObservableObject class with @Published properties.

2. Step 2: Use @State for local view data and @Published for shared data

   The main view can use @State for local state, but the shared user name should be in a class marked with @Published to notify changes.

3. Final Answer:

   Use @State in the main view and @Published in a shared ObservableObject class -> Option A

4. Quick Check:

   Shared data uses @Published; local uses @State [OK]

Hint: Shared data needs @Published; local view data uses @State [OK]

Common Mistakes:

• Using @State only for shared data
• Using @Published in structs or views directly
• Not using ObservableObject for shared data