Lists and conditionals

Two components are reactive rather than static: Show and Repeat.

A list that grows

Repeat

requires a

name

and a

template=

; it renders one instance of the template per item in a

State(...)

list. Combine it with

Action.append

and a bound input for the classic add-an-item control.

# include <stdlib.ARKlight>

site = Site()

@site.page("/")
def home():
    return Page(
        State("draft", ""),
        State("tasks", []),
        Heading("Tasks"),
        Input(bind_value=Bind.model("draft")),
        Button("Add", on_click=Action.append("tasks", Bind("draft"))),
        Watch("tasks", then=Action.reset("draft")),
        Container(
            Repeat("tasks", template=lambda: Text(RepeatItem.value())),
            class_name="stack",
        ),
        title="Tasks",
    )

What to notice

Bind("draft") as an action's value argument means "whatever draft holds when the click happens" -- only Action.set and Action.append accept it.
Watch("tasks", then=Action.reset("draft")) runs the moment tasks changes, emptying the input right after a task is added.
RepeatItem.value() inside the template reads the current item; the template runs once per entry in the list.

increment

decrement

and

remove

reject a

Bind(...)

argument at build time -- an input's value is a string, which would concatenate or never match rather than do arithmetic.

Showing or hiding content

Show(predicate, ...children)

conditionally renders its children.

predicate

is built from

Predicate.*

, a closed vocabulary checked at build time the same way

Action.*

is.

Show(Predicate.is_empty("tasks"), Text("No tasks yet.", class_name="muted"))

Common predicates:

equals

truthy

falsy

is_empty

is_not_empty

gt

lt

in_range

one_of

and_

or_

not_

. The full list is on the

reference

Try it

Add the empty-state Show(...) above the Repeat(...) in the tasks example, so the page reads clearly before anything is added.
Add a "Clear all" button with Action.set("tasks", value=[]).

See the whole thing assembled as one buildable file in

examples

Previous: 4. Reusable components