Updating child widget value via reactive

[bcho]

Hi, I am trying to create a hierarchy list by passing value through reactive. Here is a simplified version of the code:

from textual import log
from textual.app import App, ComposeResult
from textual.containers import Container
from textual.reactive import reactive
from textual.widgets import Button, Static


class ItemsList(Container):
    
    items = reactive([], layout=True)
    pressed_count = reactive(0, layout=True)

    def compose(self) -> ComposeResult:
        yield Static(f'ItemsList {self.pressed_count}')
        for item in self.items:
            yield Static(item)


class PressCounter(Static):

    pressed_count = reactive(0, layout=True)

    def render(self):
        return f'PressCounter {self.pressed_count}'


        
class DemoApp(App):

    def compose(self) -> ComposeResult:
        yield Button('Add item')
        yield PressCounter()
        yield ItemsList()

    def on_button_pressed(self, event: Button.Pressed) -> None:
        items_list = self.query_one(ItemsList)
        items_list.items = items_list.items[:] + [f'new item {len(items_list.items)}']
        items_list.pressed_count += 1
        press_counter = self.query_one(PressCounter)
        press_counter.pressed_count += 1
        log('pressed')


if __name__ == '__main__':
    app = DemoApp()
    app.run()

If rendered as:

My goal is to append items to the ItemsList after pressed the Add item button. However, it seems like the updated reactive values in the ItemsList never trigger re-rendering.

I also tried to use a Static widget to simulate similar usage, however, seems like it works as the render method has been called when updating the reactive property.

I think my current approach is incorrect, but I didn't find any existing examples show such usage. Please let me know what's the expected way for updating value from top to down. Thanks!

[TomJGooding]

You might find this discussion and the Dynamic widgets section of the Tutorial useful.

Textual calls compose only once during the mount process [...] You can react to a changing attribute with a watch method, and update any children accordingly.

You can add new widgets while the app is running by calling mount():

class ItemsList(Container):
    items = reactive([], layout=True)
    pressed_count = reactive(0, layout=True)

    def compose(self) -> ComposeResult:
        yield Static(f"ItemsList {self.pressed_count}")
        for item in self.items:
            yield Static(item)

    def watch_items(self) -> None:
        if self.items:  # Avoids IndexError if list is empty
            new_item = self.items[-1]
            self.mount(Static(new_item))

P.S. You might also want to look into the ListView widget - this might make your life easier as it has a convenient append() method!