State and actions

State lives on the page. Bind displays it. Action.* changes it.

Declare the state

State("count", 0)

is a child of

Page(...)

, not a bare statement -- that's what makes it declared on the page. It takes a name and a starting value.

# include <stdlib.ARKlight>

site = Site()

@site.page("/")
def home():
    return Page(
        State("count", 0),
        Heading("Counter"),
        Text(Bind("count")),
        Button("Increment", on_click=Action.increment("count")),
        Button("Decrement", on_click=Action.decrement("count")),
        Button("Reset", on_click=Action.set("count", value=0)),
        title="Counter",
    )

State(...)

called as a bare statement before the

return

, instead of passed as a child of

Page(...)

, fails with "references state that isn't declared on this page" the moment anything tries to

Bind

it. See

gotchas

Display it

Bind("count")

as a direct child of

Text(...)

renders the live value. It's for a single scalar value; a list-valued state uses

Repeat

instead.

Change it

Action.increment("count") and Action.decrement("count") each take an optional delta, 1 by default.
Action.set("count", value=0) sets it outright -- useful for a reset button.
Every Action.* call is built-in and validated at build time against a closed vocabulary. There's no arbitrary JS here.

Try it

Change the increment button's delta to 5 and see the build re-validate it.
Add a squared value next to the counter: Computed("squared", deps=("count",), derive=Derive.multiply("count", "count")), then Bind("squared").

See it live in

examples

, or move on to the

reference

for the full

State

Action

Derive

vocabulary.

Previous: 1. Pages and routes Next: 3. Styling and layout