List of components

[numpde]

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

[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.

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)

[rmorshea]

A WIP fix is here: #1085

[rmorshea]

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