Passing Data in SwiftUI

Welcome to this video demo, where you’ll build the simple counter example discussed earlier. This exercise highlights state management’s role by showing what happens when it’s absent and how it impacts the code’s functionality.

Start by opening the Xcode project located at 03-transitioning-from-data-passing-to-state-management/03-demo/Counter/Starter/Counter.xcodeproj.

Step 1: Create the CounterView

Once you have the project open, begin by defining a SwiftUI View called CounterView. Type the following code into the CounterApp.swift file:

struct CounterView: View {

}

Step 2: Add the Counter UI Components

Now, you’ll build the UI for the counter step by step. Inside the CounterView, declare a variable to keep track of button presses:

struct CounterView: View {
  private var count: Int = 0
}

Define the View Body

Next, define the body of the view where you’ll place the UI components.

struct CounterView: View {
  private var count: Int = 0

  var body: some View {
  }
}

Add the Text View

Inside the body, add a text view to display the current count. This view will show the value of count.

struct CounterView: View {
  private var count: Int = 0

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

Add the Button

Next, add a button that users can press to increase the count. Initially, just add the button with a title.

struct CounterView: View {
  private var count: Int = 0

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

    Button("Increment") {
    }
  }
}

Implement the Button’s Action

Finally, add the logic to increase the count inside the button’s action. Type the following code to complete the button’s action:

struct CounterView: View {
  private var count: Int = 0

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

    Button("Increment") {
      self.count += 1 // This will attempt to increment the count
    }
  }
}

When you type this line, notice how Xcode displays an error even before compiling the project. As you recall from before, this code generates a compiler error because self in self.count += 1 refers to the instance of CounterView, and because structs are immutable by default in Swift, this operation isn’t allowed.

Step 3: Run the App and Observe

Even though you’ve already seen the error in the editor, try to build and run the app. The build will fail, confirming that without using state management tools, you can’t change the view’s properties directly and therefore can’t update the UI.

Preview of the Next Module

It’s clear that you need state management to implement data updating in SwiftUI to update the app’s UI in response to changes. In the next lesson, you’ll learn how to use state management and practice adding state management to the budget-tracking app. Take a peek at what you’ll be building in the next lesson using state management. Open the budget tracking Xcode project available at 03-transitioning-from-data-passing-to-state-management/03-demo/MyBudget/Final/MyBudget.xcodeproj.

Build and run the project. Do not worry about trying to understand all the code at this moment — you’ll cover that in detail in the next lesson. Now that the app has started, remember where you left off with the budget-tracking app. You built the list of FinancialEntryRows passing the entries array from the app struct all the way through the view hierarchy. What you see now on the screen is the first display of the app rendered using data passing.

But look: There’s a new button in upper right hand corner. Go ahead and click the new plus button. Yes! The button added a row to the list. The UI changed after the first display! This dynamic change is what you’ll learn how to build in the next lesson.

Wrap-Up

Putting it all together, this demonstration has shown the limitations of pure data passing without state management. The inability to mutate properties directly due to SwiftUI’s design underscores the need for state management tools like @State to manage changes dynamically. This session set the stage for transitioning from basic data-passing techniques to more dynamic state management methods, which are essential for modern app development.

Prepare to dive deeper into state management, crucial for any SwiftUI app, as you continue to develop interactive and responsive apps using SwiftUI. Go ahead and wrap up this lesson in the conclusion.