Py.Cafe

maartenbreddels/

solara-todo-mutate-error

Todo List Manager

DocsPricing
  • app.py
  • requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import solara
from typing import TypedDict


class TodoItem(TypedDict):
    text: str
    done: bool


todos = solara.reactive(
    [
        TodoItem(text="Write a blog post", done=False),
        TodoItem(text="Take out the trash", done=True),
        TodoItem(text="Do the laundry", done=False),
    ]
)
new_text = solara.reactive(None)
some_other_state = solara.reactive(0)

def force_rerender():
    some_other_state.value += 1

@solara.component
def Page():
    some_other_state.get() # force this component to depend on this reactive var
    for item in todos.value:
        with solara.Card():
            solara.InputText("", value=item["text"])
            solara.Switch(label="Done", value=item["done"])

    def add():
        # ERROR: mutating a list is not observable in Python
        # Solara does not get notified, and we will not re-render
        todos.value.append({"text": new_text, "done": False})
        # GOOD: re-assign a new list
        # todos.value = [*todos.value, {"text": new_text, "done": False}]

    with solara.Card("New item"):
        solara.InputText(label="Text", value=new_text)
        solara.Button("Add new", on_click=add)

    solara.Button("Force re-render", on_click=force_rerender)