List of components · reactive-python/reactpy · Discussion #1081

numpde
Jul 2, 2023

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
reactpy-django==3.2.0

Answered by rmorshea

Jul 4, 2023

Fix is released in https://github.com/reactive-python/reactpy/releases/tag/reactpy-v1.0.2

View full answer

Replies: 1 comment 7 replies

Archmonger
Jul 2, 2023
Maintainer

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 item as an argument. I can paste a code example later today.

7 replies

@rmorshea

rmorshea Jul 3, 2023
Maintainer

Will look into this tomorrow. I suspect that finding with fragment will be helpful in figuring out the root cause.

@Archmonger

Archmonger Jul 3, 2023
Maintainer

I'm did a quick look at this.

After expanding this to a list of 20 elements, I can see that the Item's event handlers (and also hooks?) are always being attached to the element directly below it.

This issue appears to be strictly related to lists of components containing event handlers using hooks.

We might be attaching component_model_states incorrectly in layout.py. To me, that entire file feels non-human readable though.

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)