List of components

[numpde]

I'm confused about what's happening here. Consider this App:

fromreactpyimportcomponent, use_statefromreactpy.htmlimportdiv, buttonfromreactpy.core.typesimportState@componentdefItem(item: str, items: State):
color=use_state(None)
defdeleteme(event):
items.set_value(lambdaitems: [iforiinitemsif (i!=item)])
defcolorize(event):
color.set_value(lambdac: "blue"ifnotcelseNone)
returndiv(
{'style': {'background-color': color.valueor"transparent", 'padding': "5px"}},
div(
button({'onClick': colorize}, f"Color {item}"),
button({'onClick': deleteme}, f"Delete {item}"),
),
)
@componentdefApp():
items=use_state(["A", "B", "C"])
returndiv(
[
Item(item, items, key=item)
foriteminitems.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

[Archmonger]

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.

[rmorshea]

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

[Archmonger]

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.

fromreactpyimportcomponent, use_state, runfromreactpy.htmlimportdiv, buttonfromreactpy.core.typesimportState@componentdefItem(item: str, items: State):
color=use_state(None)
defdeleteme(event):
items.set_value(lambdaitems: [iforiinitemsif (i!=item)])
defcolorize(event):
color.set_value(lambdac: Noneifcelse"blue")
returndiv(
{"style": {"background-color": color.valueor"transparent", "padding": "5px"}},
div(
button({"onClick": colorize}, f"Color {item}"),
button({"onClick": deleteme}, f"Delete {item}"),
),
)
@componentdefApp():
items=use_state(list(range(20)))
temp= [Item(item, items, key=item) foriteminitems.value]
returndiv(temp)
run(App)

[rmorshea]

A WIP fix is here: #1085

[rmorshea]

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