Button on_clicks created within a loop do not work within vstack about marimo HOT 2 CLOSED

Hey @jcgsville , this is a limitation of our static analysis. Even though you created 3 buttons, at the end of the for loop, you only have one variable bound to a button, namely _button, and it is assigned to the last button created in the for loop.

In general, when creating a dynamic number of UI elements, you need to use mo.ui.array or mo.ui.dictionary. If you are concerned about formatting, the elements can be pulled out and displayed however you like. I will link an example.

First, here is the corrected code for your second example:

def _on_click(value):
    print('in _on_click')

foo_arr = ["uno", "dos", "tres"]

_element_arr = []
for label in foo_arr:
    _button = mo.ui.button(label=label, on_click=_on_click)
    _element_arr.append(_button)

# You need to wrap your Python list in mo.ui.array and assign it to a variable
_element_arr = mo.ui.array(_element_arr)
_element = mo.vstack(_element_arr)

_element

Next, here is an example of how to have custom formatting with mo.ui.array (view in our playground):

import marimo

__generated_with = "0.3.1"
app = marimo.App()


@app.cell
def __():
    import marimo as mo
    return mo,


@app.cell
def __(mo):
    def _on_click(value):
        print("in _on_click")


    foo_arr = ["uno", "dos", "tres"]
    element_arr = mo.ui.array(
        [mo.ui.button(label=label, on_click=_on_click) for label in foo_arr]
    )
    return element_arr, foo_arr


@app.cell
def __(element_arr, mo):
    # custom formatting #1: vstack
    mo.vstack(element_arr)
    return


@app.cell
def __(element_arr, mo):
    # custom formatting #2: via element access

    mo.md(
        f"""
        Here are my buttons!

        - {element_arr[0]}
        - {element_arr[1]}
        - {element_arr[2]}
        """
    )
    return


if __name__ == "__main__":
    app.run()

If you haven't already, I do recommend reading our documentation guide on interactivity: https://docs.marimo.io/guides/interactivity.html#interactivity

There you will see the following text:

For interactions on a UI element to have any effect, the element must be assigned to a global variable.

Hope this helps!

from marimo.

Hey @akshayka. Thank you for the thorough explanation. That makes sense. I read the docs but it didn't click with me that this was an "interactivity" problem. I associated "interactivity" with state management in my brain.

Hopefully google will surface this response for the next person who similarly stumbles as I did.

Cheers, and thanks again!

from marimo.