Closed
Description
We are not appropriately updating the location of a given component within the overall VDOM when it changes position. This particular line is at fault - it just blindly copies the path from the old model instead of recomputing that path given the new parent and index (f"{new_parent.patch_path}/children/{new_index}"
).
Discussed in #1081
Originally posted by numpde July 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