;
};
A task list you can add to and remove from. `ForEach` renders the items, `AppendState` adds new ones, and `PopState` removes by index. The item count updates reactively via the `length` pipe.
```python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui import PrefabApp
from prefab_ui.actions import AppendState, PopState, SetState
from prefab_ui.components import (
Button, Card, CardContent, CardFooter, CardHeader, CardTitle,
Column, Input, Muted, Row, Separator, Text,
)
from prefab_ui.components.control_flow import ForEach
from prefab_ui.rx import INDEX, ITEM, Rx
new_task = Rx("new_task")
tasks = Rx("tasks")
with PrefabApp(
state={"tasks": ["Buy towel", "Learn Python", "Don't panic"], "new_task": ""},
css_class="max-w-none p-0",
):
with Card(css_class="w-full"):
with CardHeader():
CardTitle("Task List")
Muted(f"{tasks.length()} items")
with CardContent():
with Column(gap=3):
with Row(gap=2):
Input(name="new_task", placeholder="Add a task...")
Button(
"Add",
on_click=[
AppendState("tasks", new_task),
SetState("new_task", ""),
],
)
Separator()
with ForEach(tasks):
with Row(gap=2, align="center", css_class="justify-between"):
Text(ITEM)
Button(
"Remove", variant="outline", size="sm",
on_click=PopState("tasks", index=INDEX),
)
with CardFooter():
Button("Clear All", variant="destructive", on_click=SetState("tasks", []))
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"cssClass": "pf-app-root max-w-none p-0",
"type": "Div",
"children": [
{
"cssClass": "w-full",
"type": "Card",
"children": [
{
"type": "CardHeader",
"children": [
{"type": "CardTitle", "content": "Task List"},
{"content": "{{ tasks | length }} items", "type": "Muted"}
]
},
{
"type": "CardContent",
"children": [
{
"cssClass": "gap-3",
"type": "Column",
"children": [
{
"cssClass": "gap-2",
"type": "Row",
"children": [
{
"name": "new_task",
"type": "Input",
"inputType": "text",
"placeholder": "Add a task...",
"disabled": false,
"readOnly": false,
"required": false
},
{
"type": "Button",
"label": "Add",
"variant": "default",
"size": "default",
"disabled": false,
"onClick": [
{"action": "appendState", "key": "tasks", "value": "{{ new_task }}"},
{"action": "setState", "key": "new_task", "value": ""}
]
}
]
},
{"type": "Separator", "orientation": "horizontal"},
{
"let": {"_loop_9": "{{ $item }}", "_loop_9_idx": "{{ $index }}"},
"type": "ForEach",
"key": "tasks",
"children": [
{
"cssClass": "gap-2 items-center justify-between",
"type": "Row",
"children": [
{"content": "{{ $item }}", "type": "Text"},
{
"type": "Button",
"label": "Remove",
"variant": "outline",
"size": "sm",
"disabled": false,
"onClick": {"action": "popState", "key": "tasks", "index": "{{ $index }}"}
}
]
}
]
}
]
}
]
},
{
"type": "CardFooter",
"children": [
{
"type": "Button",
"label": "Clear All",
"variant": "destructive",
"size": "default",
"disabled": false,
"onClick": {"action": "setState", "key": "tasks", "value": []}
}
]
}
]
}
]
},
"state": {"tasks": ["Buy towel", "Learn Python", "Don't panic"], "new_task": ""}
}
```
## How It Works
The list lives in [state](/concepts/state). `PrefabApp` seeds two keys: `tasks`, a list of strings, and `new_task`, the text currently in the input. Everything on screen is a function of those two values, and every button mutates them through client-side [actions](/concepts/actions) — there is no server in the loop.
The input and the add button form a small write/clear cycle. `Input(name="new_task")` two-way binds to the `new_task` state key, so typing keeps that key current. The button fires a *list* of actions in order: `AppendState("tasks", new_task)` pushes the input's current value onto the `tasks` list, then `SetState("new_task", "")` empties the box so it's ready for the next entry. Passing `new_task = Rx("new_task")` as the value (rather than a literal) means the action reads live state at click time, appending whatever the user actually typed.
The list itself is rendered with [`ForEach`](/components/foreach). `with ForEach(tasks):` iterates the `tasks` state key and re-runs whenever it changes — add or remove an item and the rendered rows update with no manual bookkeeping. Inside the loop, `ITEM` is the current element's value and `INDEX` is its position. `Text(ITEM)` shows the task, and the remove button calls `PopState("tasks", index=INDEX)` to delete exactly that row by index. Because `ForEach` supplies a stable `INDEX` per row, each Remove button targets the right element even as the list shifts.
The footer count, `Muted(f"{tasks.length()} items")`, is a [reactive expression](/concepts/expressions): `tasks.length()` compiles to a `length` pipe the renderer recomputes on every state change, so the number tracks the list without any explicit update. `Clear All` is the simplest mutation of all — `SetState("tasks", [])` replaces the whole list with an empty one, and `ForEach`, the count, and the buttons all collapse accordingly.