Internal State

Components can have state just as stores can.

component Main {
  state greeting : String = "Welcome"

  fun greet : Promise(Void) {
    let newGreeting =
      if greeting == "hello" {
        "bye"
      } else {
        "hello"
      }

    next { greeting: newGreeting }
  }

  fun render : Html {
    <div>
      <{ greeting }>
      <br/>

      <button onClick={greet}>
        "Switch"
      </button>
    </div>
  }
}

The state keyword is used to attach private state variable to a Component. It cannot be passed in from another Component, but it can be updated with the next keyword.

Optional type

The type annotation can be left out:

component User {
  state greeting = "Welcome"

  ...
}