Internal State

Components can have state just as stores can.

component Main {
  state greeting : String = "Welcome"

  fun greet : Promise(Never, Void) {
    next { greeting = newGreeting }
  } where {
    newGreeting =
      if (greeting == "hello") {
        "bye"
      } else {
        "hello"
      }
  }

  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"

  ...
}