Reusable Custom Card Component Action Button Issue

[lnarimatsu]

I’ve been experimenting with the Mesop framework for a few days and have encountered an issue trying to create a card component. Each card displays its respective information correctly. However, I’m facing a problem with the action buttons on these cards.

The issue is that all the action buttons, regardless of the card they belong to, are loaded with the data from the last card. I expected each action button to hold the data specific to its card. I’m unsure why this is happening and would appreciate any insights or solutions to this problem. Thank you!

Regardless of which card button is clicked, the navigation will always lead to the ‘/admin’ page

card.py

import mesop as me
from tokens.colors import colors


def card_comp(
    title="Title",
    description="This is the Description",
    button_text="Get Started",
    path=None,
):
    with me.box(
        style=me.Style(
            flex_direction="column",
            display="flex",
            justify_content="space-between",
            gap=8,
            height=180,
            width=240,
            padding=me.Padding.all(16),
            border_radius=8,
            border=me.Border.symmetric(
                horizontal=me.BorderSide(
                    width=1, style="solid", color=colors["primary"]
                ),
                vertical=me.BorderSide(width=1, style="solid", color=colors["primary"]),
            ),
        ),
    ):
        me.text(
            title,
            style=me.Style(color=colors["primary"], font_weight=500, font_size=20),
        )
        me.text(description, type="subtitle-2")

        def redirect(e):
            print(title)
            print(path)
            if path:
                me.navigate(path)

        me.button(
            button_text,
            on_click=redirect,
            type="flat",
            style=me.Style(
                width="100%",
                border_radius=8,
                background=colors["primary"],
            ),
        )

home.py

import mesop as me
from components.cards import card_comp

cards = [
    {
        "title": "Templating",
        "description": "Generate documents from templates",
        "button_text": "Get Started",
        "path": "/templating",
    },
    {
        "title": "Parsing",
        "description": "Parse configuration files into a excel file",
        "button_text": "Convert",
        "path": "/parsing",
    },
    {
        "title": "Connectors",
        "description": "API Integration with other systems or vendors",
        "button_text": "Connect",
        "path": "/connectors",
    },
    {
        "title": "Stats",
        "description": "Utilization statistics on APP usage",
        "button_text": "View",
        "path": "/stats",
    },
    {
        "title": "Admin",
        "description": "Access to Administration Dashboard Panel",
        "button_text": "Administrate",
        "path": "/admin",
    },
]


def home_page():
    with me.box(
        style=me.Style(
            margin=me.Margin.symmetric(vertical="3%", horizontal="5%"),
        ),
    ):
        (
            me.text(
                "Welcome to APP",
                style=me.Style(
                    font_weight=500,
                    font_size=28,
                    margin=me.Margin.symmetric(vertical=20),
                ),
            ),
        )

        with me.box(
            style=me.Style(
                display="flex",
                flex_wrap="wrap",
                gap=16,
                border_radius=8,
            ),
        ):
            for card in cards:
                card_comp(
                    title=card["title"],
                    description=card["description"],
                    button_text=card["button_text"],
                    path=card["path"],
                )

[wwwillchen]

Take a look at: https://google.github.io/mesop/guides/interactivity/#avoid-using-closure-variables-in-event-handler

Specifically, you should change the code here:

        def redirect(e):
            print(title)
            print(path)
            if path:
                me.navigate(e.key) # use `e.key` and not `path`

        me.button(
            key=path # Add a key, so you can use it in the redirect
            button_text,
            on_click=redirect,

Unfortunately this isn't really intuitive in Mesop but it's a limitation with how event handlers are registered. Let us know if you're still running into issues.

[lnarimatsu]

Hi Will,
I made the changes you recommended, and it's working now. Thanks for the quick response!!