taking parameters from button click on loop does not work

[bobwatcherx]

I want to retrieve data from what I click instead output like this

{'altKey': False, 'button': 0, 'buttons': 0, 'clientX': 221, 'clientY': 162, 'ctrlKey': False, 'metaKey': False, 'pageX': 221, 'pageY': 162, 'screenX': 222, 'screenY': 268, 'shiftKey': False, 'target': {'boundingClientRect': {'x': 185.0500030517578, 'y': 156.75, 'width': 77.18333435058594, 'height': 23, 'top': 156.75, 'right': 262.23333740234375, 'bottom': 179.75, 'left': 185.0500030517578}, 'value': '', 'name': ''}, 'currentTarget': {'boundingClientRect': {'x': 185.0500030517578, 'y': 156.75, 'width': 77.18333435058594, 'height': 23, 'top': 156.75, 'right': 262.23333740234375, 'bottom': 179.75, 'left': 185.0500030517578}, 'value': '', 'name': ''}, 'relatedTarget': None

mycode

from flask import Flask

from idom import component, html,hooks
from idom.backend.flask import configure



@component
def mylist(items):
    index,set_index = hooks.use_state(0)

    def tambah(e):
        set_index(index + 1)

    def klik(i):
        print(i)

    list  = [html.li({"key":i["id"]},i['text'],i['priority'],html.button({"on_click":lambda i=i:klik(i)},"click saya")) for i in items]
    return  html.div(
        html.h2(index),
        html.button({"on_click":tambah},"tambah"),

        html.ul(
        list
        )
        )


@component
def HelloWorld():
    tasks = [
        {"id": 0, "text": "Make breakfast", "priority": 0},
        {"id": 1, "text": "Feed the dog", "priority": 0},
        {"id": 2, "text": "Do laundry", "priority": 2},
        {"id": 3, "text": "Go on a run", "priority": 1},
        {"id": 4, "text": "Clean the house", "priority": 2},
        {"id": 5, "text": "Go to the grocery store", "priority": 2},
        {"id": 6, "text": "Do some coding", "priority": 1},
        {"id": 7, "text": "Read a book", "priority": 1},
    ]
    return html.section(
        html.h1("test"),
        mylist(tasks)
        )

app = Flask(__name__)
configure(app, HelloWorld)

[rmorshea]

I want to retrieve data from what I click

What data are you trying to get at? It's not especially clear from your code?

[rmorshea]

My guess is that you're probably trying to access the value? If so, that can be found at event["target"]["value"]. As much as possible we try to relate data from event objects as they would appear in Javascript, so in most cases you can refer to standard docs (e.g. these on the different event types) to figure things out.

[bobwatcherx]

i want to get data text , priority from tasks
precisely in this code

 list  = [html.li({"key":i["id"]},i['text'],i['priority'],html.button({"on_click":lambda i=i:klik(i)},"click saya")) for i in items]
   
def klik(i):
        print(i)

and my expectation i want to get the data i click like i['text'] and i['priority']
similar to how click details work. so i want to get the data i click its button

but instead I get data that is not as expected. like this when printed

{'altKey': False, 'button': 0, 'buttons': 0, 'clientX': 221, 'clientY': 162, 'ctrlKey': False, 'metaKey': False, 'pageX': 221, 'pageY': 162, 'screenX': 222, 'screenY': 268, 'shiftKey': False, 'target': {'boundingClientRect': {'x': 185.0500030517578, 'y': 156.75, 'width': 77.18333435058594, 'height': 23, 'top': 156.75, 'right': 262.23333740234375, 'bottom': 179.75, 'left': 185.0500030517578}, 'value': '', 'name': ''}, 'currentTarget': {'boundingClientRect': {'x': 185.0500030517578, 'y': 156.75, 'width': 77.18333435058594, 'height': 23, 'top': 156.75, 'right': 262.23333740234375, 'bottom': 179.75, 'left': 185.0500030517578}, 'value': '', 'name': ''}, 'relatedTarget': Non

[rmorshea]

This is because, just as in Javascript, the first parameter passed to event handlers is information about the event itself. Your function lambda i=i: klik(i) should be rewritten as lambda event, i=i:klik(i)

[bobwatcherx]

and how to integrate reactpy with ui css framework like bootstrap. is there a way?

[rmorshea]

See my other response here: #980 (comment)

[bobwatcherx]

thanks solved