Capture value, id or name of a button or link

[Gelraiser]

I have created a very simple example, to try to capture the value of the button and send it, to change the text on the screen. It does not work. Is there any way to capture the id, value or name of the button or link, when you click on it?

import reflex as rx

class TestState(rx.State):
    text: str = "hello"

 
    def abrir_pdf(self, value) -> str:
        # This will be recomputed whenever `text` changes.
        self.text = value


def index() -> rx.Component:
    return rx.vstack(
        rx.chakra.badge(
        TestState.text, variant="solid", color_scheme="green"
    ),
        rx.button(
           "Click Me!",
           type="submit",
           value = "5",
           on_click= lambda e: TestState.abrir_pdf(e)
           )
    )

app = rx.App()
app.add_page(index)

[masenf]

You can pass arbitrary value to the handler when using a lambda.

import reflex as rx

class TestState(rx.State):
    text: str = "hello"

 
    def abrir_pdf(self, value, context) -> str:
        self.text = value


def index() -> rx.Component:
    return rx.vstack(
        rx.chakra.badge(
            TestState.text, variant="solid", color_scheme="green"
        ),
        rx.button(
           "Click Me!",
           type="submit",
           value = "5",
           on_click= lambda: TestState.abrir_pdf("5", "button-1-clicked")
       )
    )

app = rx.App()
app.add_page(index)

Here i'm passing "button-1-clicked" to the new context parameter of the event handler. This would allow you to re-use the event handler, but get extra information about where it was invoked from.

[Gelraiser]

Thank you for the response. I have tried the modification you proposed and it returns the following error:
TypeError: index.<locals>.<lambda>() missing 1 required positional argument: 'e'.
On the other hand, what I need is to be able to capture the value of the button, which in this case is created by code, but my real issue is with buttons or links created from a database query. I can assign a value or id to them at the time of creation, but then I don't know how to capture the data contained in value or id to make other queries.

[masenf]

I updated the example code. I had it wrong, because on_click doesn't pass a parameter, so the lambda cannot take any parameters.

How are you creating the buttons?

[Gelraiser]

I create them on the air, making a query to the database. Then when I click on the button, I need the value or the id of that button, to find specific data of that button in another table. As an example, I create the buttons with a SELECT to the database and I create as many buttons (links) as the results of the query, which are the options that the person will have available. When any of them is pressed, I have to know which button was pressed to return the correct information. I hope I have explained myself.

[masenf]

Would something like this work for you?

import random

import reflex as rx


class State(rx.State):
    values: list
    last_click: int

    def on_load(self):
        self.values = [random.randint(1, 100) for _ in range(10)]

    def handle_button_press(self, value):
        self.last_click = value


def index() -> rx.Component:
    return rx.center(
        rx.vstack(
            rx.text("Last clicked: ", State.last_click),
            rx.hstack(
                rx.foreach(
                    State.values,
                    lambda value: rx.button(
                        value,
                        on_click=State.handle_button_press(value),
                    ),
                ),
            ),
        ),
        height="100vh",
    )


app = rx.App()
app.add_page(index, on_load=State.on_load)

[Gelraiser]

oooooooh, thank you very much, it works!!!