SwiftUI-Sample/Other Projects/React Meets SwiftUI/State.md

Managing State

With SwiftUI you can create state in views and pass that state to child views, much as you would in React. You can also pass functions as props which allow child views to control state in parent components.

The example below creates a simple counter. The ContentView manages the count state, while the child view renders that count and asks the parent to increment.

React

import React from "react";

export function ContentView() {
  const [count, setCount] = useState(0);

  function increment() {
    setCount(count + 1);
  }

  return (
    <div>
      <div>Press the button below</div>
      <ChildView count={count} increment={increment} />
    </div>
  );
}

export function ChildView({ count, increment }) {
  return (
    <div>
      <div>{coun t}</div>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

SwiftUI

import SwiftUI

struct ContentView : View {
    @State var count = 0

    var body: some View {
        VStack(spacing: 1.0) {
            Text("Press the button below")
            ChildView(
                counter: count,
                increment: increment
            )
        }
    }

    func increment() {
        count += 1
    }
}


struct ChildView : View {
    var counter: Int
    var increment: () -> Void

    var body: some View {
        VStack {
            Text("\(counter)")
            Button(action: increment) {
                Text("Increment")
            }
        }
    }
}

With SwiftUI you can use @Binding to enable child views to alter state provided by parent views. Notice that we prepend the $ to our count value to pass its binding value. Our child can then alter the count state itself without supplying a callback to the parent.

import SwiftUI

struct ContentView : View {
    @State var count = 0

    var body: some View {
        VStack(spacing: 1.0) {
            Text("Press the button below")
            ChildView(
                counter: $count
            )
        }
    }
}


struct ChildView : View {
    @Binding var counter: Int

    func increment () {
        counter += 1
    }

    var body: some View {
        VStack {
            Text("\(counter)")
            Button(action: increment) {
                Text("Increment")
            }
        }
    }
}