4 - Dynamic Content and on_click Events

codingforentrepreneurs · codingforentrepreneurs · commit 35490364bf4f · 2024-06-10T16:50:41.000-06:00
diff --git a/full_stack_python/full_stack_python.py b/full_stack_python/full_stack_python.py
@@ -7,21 +7,29 @@
 
 class State(rx.State):
     """The app state."""
+    label = "This is my label"
+    orginal_label = "This is my label"
 
-    ...
+    def change_label(self):
+        if self.label == "Cool label.":
+            self.label = self.orginal_label
+        else:
+            self.label = "Cool label."
 
 
 def index() -> rx.Component:
     # Welcome Page (Index)
     return rx.container(
         rx.color_mode.button(position="bottom-left"),
         rx.vstack(
-            rx.heading("Welcome to Reflex!", size="9"),
+            rx.heading(State.label, " Welcome to Reflex!", size="9"),
             rx.text(
                 "Get started by editing ",
                 rx.code(f"{config.app_name}/{config.app_name}.py"),
+                on_click=State.change_label,
                 size="5",
             ),
+            # rx.button("Do something!", on_click=State.change_label),
             rx.link(
                 rx.button("Check out our docs!"),
                 href="https://reflex.dev/docs/getting-started/introduction/",
