Replies: 3 comments 1 reply
-
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 :
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 :
There we can see that the Objects does have a But the value is "converted" to this in the foreach :
Why ? How do I get the foreach to send the actual list item to the render function ? |
Beta Was this translation helpful? Give feedback.
-
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
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
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,
+ ),
+ ),
), |
Beta Was this translation helpful? Give feedback.
-
Thanks for this very precise answer ! It does work indeed. Which leads me to a few questions, if I may :
|
Beta Was this translation helpful? Give feedback.
-
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 forState
, but if I use a list of Objects (of Action dataclass type) then I have this strange error message :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 :
In
components
subfolder,taskcard.py
Beta Was this translation helpful? Give feedback.
All reactions