Using Objects in Foreach ? Why is it modifying values ?

[ml4nC3]

Hi,

I'm confused on this simple example.

I want to code a card component containing a todo list that I would be used in some page. I would like each task of the todo to be an object (dataclass) with multiple properties.

This piece of code is working fine if I use a list of Strings as actions property for State, but if I use a list of Objects (of Action dataclass type) then I have this strange error message :

...
File "/run/media/nicolas/storage/Projets/dev/perso/RevesManager/./RevesManager/components/taskcard.py", line 7, in render_task
    pc.text(action.title)  # 'action' only with string list
  File "/run/media/nicolas/storage/Projets/dev/perso/RevesManager/venv/lib/python3.10/site-packages/pynecone/vars.py", line 288, in __getattribute__
    raise TypeError(
TypeError: You must provide an annotation for the state var `_`. Annotation cannot be `typing.Any`

I tried also declaring Action in another file and import it in both main and component in order to typehint action parameter in the render function with same result.

Should I add something to the Action class declaration ?

Main file :

"""Welcome to Pynecone! This file outlines the steps to create a basic app."""
from pcconfig import config
from dataclasses import dataclass

import pynecone as pc
from .components import taskcard

docs_url = "https://pynecone.io/docs/getting-started/introduction"
filename = f"{config.app_name}/{config.app_name}.py"


@dataclass
class Action:
    title: str
    is_checked = False


test_actions_data = [
    "Si tu ne fais pas d'efforts",
    "Ce ne sont pas les efforts",
    "Qui vont te faire.",
]
test_actions = [Action(item) for item in test_actions_data]


class State(pc.State):
    """The app state."""
    actions: list = test_actions  # test_actions_data for list of Strings


def index() -> pc.Component:
    return pc.center(
        pc.vstack(
            pc.heading("Tasks"),
            taskcard.task_card("Envie de faire mieux", State.actions)
        ),
        padding_top="10%",
    )


# Add state and page to the app.
app = pc.App(state=State)
app.add_page(index)
app.compile()

In components subfolder, taskcard.py

import pynecone as pc


def render_task(action):
    return pc.hstack(
        pc.icon(tag="minus"),
        pc.text(action.title)  # 'action' only with string list
    )


def task_card(title: str, actions: list):
    return pc.card(
        pc.list(
            pc.foreach(actions, render_task)
        ),
        header=pc.heading(title)
    )

[ml4nC3]

I've got one step further : the issue is coming from the typing of State property. It should precise it is a list of Action :

class State(pc.State):
    """The app state."""
    actions: list[Action] = test_actions  # test_actions_data for list of Strings

However it is still not working. Now I have :

File "/run/media/nicolas/storage/Projets/dev/perso/RevesManager/venv/lib/python3.10/site-packages/pynecone/vars.py", line 300, in __getattribute__
    raise AttributeError(
AttributeError: The State var `_` has no attribute 'title' or may have been annotated wrongly.

And this is because the foreach function does not send the list item, but something else... Why ?

Here is some print of objects as created in the main file :

Actions : {'title': "Si tu ne fais pas d'efforts", 'is_checked': False}
Actions : {'title': 'Ce ne sont pas les efforts', 'is_checked': False}
Actions : {'title': 'Qui vont te faire.', 'is_checked': False}

There we can see that the Objects does have a title property.

But the value is "converted" to this in the foreach :

ITEM : {'name': '_', 'type_': <class 'RevesManager.models.actions.Action'>, 'state': '', 'is_local': True, 'is_string': False}

Why ? How do I get the foreach to send the actual list item to the render function ?
EDIT : The list is actually transformed before foreach, when it is added in State...

[masenf]

Thanks for checking out pynecone and posting your code in this discussion!

I hammered on what you had and got it working, so I'll try to explain why these changes I made are necessary.

Rendering Objects

1. dataclass-like types should inherit from pc.Base. This is a pydantic base class that allows the pynecone framework to analyze the variable types for serialization and compiled js operations.
2. provide type annotations for all fields in a pc.Base-derived class; I added the bool annotation for is_checked.
3. pc.Base only accepts keyword arguments, so the test_actions comprehension passes the title kwarg.

diff --git a/repro_1125/repro_1125.py b/repro_1125/repro_1125.py
index 6b3095c..013dfa4 100644
--- a/repro_1125/repro_1125.py
+++ b/repro_1125/repro_1125.py
@@ -9,10 +9,9 @@ docs_url = "https://pynecone.io/docs/getting-started/introduction"
 filename = f"{config.app_name}/{config.app_name}.py"
 
 
-@dataclass
-class Action:
+class Action(pc.Base):
     title: str
-    is_checked = False
+    is_checked: bool = False
 
 
 test_actions_data = [
@@ -20,12 +19,12 @@ test_actions_data = [
     "Ce ne sont pas les efforts",
     "Qui vont te faire.",
 ]
-test_actions = [Action(item) for item in test_actions_data]
+test_actions = [Action(title=item) for item in test_actions_data]
 
 
 class State(pc.State):
     """The app state."""
-    actions: list = test_actions  # test_actions_data for list of Strings
+    actions: list[Action] = test_actions  # test_actions_data for list of Strings
 
 
 def index() -> pc.Component:

With these changes, the tasklist is rendering properly.

Handling Events

1. Add toggle_action_checked event handler to the app state. find an action in the list and flip the is_checked boolean. Note the "useless" assignment self.actions[ix] = self.actions[ix]! This is necessary to trigger a state update; updating a value on an item in the list is not sufficient to trigger a state update on its own.
2. Pass the event handler through to the task_card function
3. render_task accepts a set_toggle_action event handler that is called when clicking task items
4. Note the use of lambda when passing event handlers to supply additional arguments.

diff --git a/repro_1125/repro_1125.py b/repro_1125/repro_1125.py
index 013dfa4..3179d3d 100644
--- a/repro_1125/repro_1125.py
+++ b/repro_1125/repro_1125.py
@@ -26,12 +26,21 @@ class State(pc.State):
     """The app state."""
     actions: list[Action] = test_actions  # test_actions_data for list of Strings
 
+    def toggle_action_checked(self, action):
+        ix = self.actions.index(action)
+        self.actions[ix].is_checked = not self.actions[ix].is_checked
+        self.actions[ix] = self.actions[ix]  # reassign field to update state
+
 
 def index() -> pc.Component:
     return pc.center(
         pc.vstack(
             pc.heading("Tasks"),
-            taskcard.task_card("Envie de faire mieux", State.actions)
+            taskcard.task_card(
+                "Envie de faire mieux",
+                State.actions,
+                State.toggle_action_checked,
+            ),
         ),
         padding_top="10%",
     )
diff --git a/repro_1125/components/taskcard.py b/repro_1125/components/taskcard.py
index 2463a59..6b8bba9 100644
--- a/repro_1125/components/taskcard.py
+++ b/repro_1125/components/taskcard.py
@@ -1,17 +1,28 @@
 import pynecone as pc
 
 
-def render_task(action):
+def render_task(action, set_toggle_action):
     return pc.hstack(
-        pc.icon(tag="minus"),
-        pc.text(action.title)  # 'action' only with string list
+        pc.cond(
+            action.is_checked,
+            pc.icon(tag="star"),
+            pc.icon(tag="minus"),
+        ),
+        pc.text(action.title),  # 'action' only with string list
+        on_click=lambda: set_toggle_action(action),
     )
 
 
-def task_card(title: str, actions: list):
+def task_card(title: str, actions: list, set_toggle_action: pc.event.EventHandler):
     return pc.card(
         pc.list(
-            pc.foreach(actions, render_task)
+            pc.foreach(
+                actions,
+                lambda action: render_task(
+                    action,
+                    set_toggle_action=set_toggle_action,
+                ),
+            ),
         ),

[ml4nC3]

Thanks for this very precise answer ! It does work indeed.

Which leads me to a few questions, if I may :

• Should I conclude that Pynecone State should always reference basics types or specific pynecone objects ?
  • Ok... Yes, I missed this one : https://pynecone.io/docs/api-reference/base
• in toggle_action_checked, regarding the explanation for ix = self.actions.index(action), I can see that the action parameter is actually a dict and not an object of Action type. Is this because the data is actually coming from react client as JSON ?

[masenf]

I can see that the action parameter is actually a dict and not an object of Action type. Is this because the data is actually coming from react client as JSON ?

Yes, I believe that's the case... this might actually be a bug on the pynecone side. (Should pynecone be creating instances of the expected Base subclass?)

Using the index trick here to get the actual object works due to duck typing: the Action object compares as equal to the dict if they contain the same corresponding fields.

Even if the event handler param came through as an actual Action instance, you would still need to assign it into the State somewhere for the change to go back to the client; just modifying the parameter passed to an event handler would be ineffective, because it's essentially an ephemeral value from the client, not tied to the State.

From an efficiency perspective, it's probably preferred to use stable IDs (so NOT an index that can change), and only pass the object ID to the event handler, rather than the full object data.