-
|
I'm confused about what's happening here. Consider this App: from reactpy import component, use_state
from reactpy.html import div, button
from reactpy.core.types import State
@component
def Item(item: str, items: State):
color = use_state(None)
def deleteme(event):
items.set_value(lambda items: [i for i in items if (i != item)])
def colorize(event):
color.set_value(lambda c: "blue" if not c else None)
return div(
{'style': {'background-color': color.value or "transparent", 'padding': "5px"}},
div(
button({'onClick': colorize}, f"Color {item}"),
button({'onClick': deleteme}, f"Delete {item}"),
),
)
@component
def App():
items = use_state(["A", "B", "C"])
return div(
[
Item(item, items, key=item)
for item in items.value
]
)I embed it from a Django template. Here's the equivalent ReactJS implementation for reference. Now, when I delete Item A then click to color Item B, then unexpectedly, Item C appears overwritten. reactpy==1.0.1 |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 7 replies
-
|
This might be related to a common issue in Python, since all variables are passed by reference. See this page for more details. You will need to create a wrapper function for your event and pass in |
Beta Was this translation helpful? Give feedback.
-
|
Will look into this tomorrow. I suspect that finding with |
Beta Was this translation helpful? Give feedback.
-
|
I'm did a quick look at this. After expanding this to a list of 20 elements, I can see that the This issue appears to be strictly related to lists of components containing event handlers using hooks. We might be attaching from reactpy import component, use_state, run
from reactpy.html import div, button
from reactpy.core.types import State
@component
def Item(item: str, items: State):
color = use_state(None)
def deleteme(event):
items.set_value(lambda items: [i for i in items if (i != item)])
def colorize(event):
color.set_value(lambda c: None if c else "blue")
return div(
{"style": {"background-color": color.value or "transparent", "padding": "5px"}},
div(
button({"onClick": colorize}, f"Color {item}"),
button({"onClick": deleteme}, f"Delete {item}"),
),
)
@component
def App():
items = use_state(list(range(20)))
temp = [Item(item, items, key=item) for item in items.value]
return div(temp)
run(App) |
Beta Was this translation helpful? Give feedback.
-
|
A WIP fix is here: #1085 |
Beta Was this translation helpful? Give feedback.
-
|
Fix is released in https://github.com/reactive-python/reactpy/releases/tag/reactpy-v1.0.2 |
Beta Was this translation helpful? Give feedback.
Fix is released in https://github.com/reactive-python/reactpy/releases/tag/reactpy-v1.0.2