Avoid duplicate state names in markdown files

These duplicate names are not causing an obvious error, however when combined
with reflex-dev/reflex#3214, the duplicate state names are not resolvable due
to how the state classes are redefined from different modules.

blog/2024-03-21-reflex-architecture.md

@@ -22,7 +22,7 @@ We'll use the following basic app that displays Github profile images as an exam
 import requests
 import reflex as rx
 
-class GithubState(rx.State):
+class GithubState1(rx.State):
     url: str = "https://github.com/reflex-dev"
     profile_image: str = "https://avatars.githubusercontent.com/u/104714959"
 
@@ -36,12 +36,12 @@ class GithubState(rx.State):
 def index():
     return rx.hstack(
         rx.link(
-            rx.avatar(src=GithubState.profile_image),
-            href=GithubState.url,
+            rx.avatar(src=GithubState1.profile_image),
+            href=GithubState1.url,
         ),
         rx.input(
             placeholder="Your Github username",
-            on_blur=GithubState.set_profile,
+            on_blur=GithubState1.set_profile,
         ),
     )
 ```
@@ -115,12 +115,12 @@ Reflex frontends are built using components that can be composed together to cre
 def index():
     return rx.hstack(
         rx.link(
-            rx.avatar(src=GithubState.profile_image),
-            href=GithubState.url,
+            rx.avatar(src=GithubState1.profile_image),
+            href=GithubState1.url,
         ),
         rx.input(
             placeholder="Your Github username",
-            on_blur=GithubState.set_profile,
+            on_blur=GithubState1.set_profile,
         ),
     )
 ```
@@ -133,13 +133,13 @@ Under the hood, these components compile down to React components. For example,
 
 ```jsx
 <HStack>
-    <Link href=\{GithubState.url}>
-        <Avatar src=\{GithubState.profile_image}/>
+    <Link href=\{GithubState1.url}>
+        <Avatar src=\{GithubState1.profile_image}/>
     </Link>
     <Input
         placeholder="Your Github username"
         // This would actually be a websocket call to the backend.
-        onBlur=\{GithubState.set_profile}
+        onBlur=\{GithubState1.set_profile}
     >
 </HStack>
 ```
@@ -167,7 +167,7 @@ In Reflex only the frontend compiles to Javascript and runs on the user's browse
 All the state and logic are defined within a `State` class.
 
 ```python
-class GithubState(rx.State):
+class GithubState1(rx.State):
     url: str = "https://github.com/reflex-dev"
     profile_image: str = "https://avatars.githubusercontent.com/u/104714959"
 
@@ -202,7 +202,7 @@ The user can interact with the UI in many ways, such as clicking a button, typin
 ```python
 rx.input(
     placeholder="Your Github username",
-    on_blur=GithubState.set_profile,
+    on_blur=GithubState1.set_profile,
 )
 ```
 
@@ -221,7 +221,7 @@ Let's assume I type my username "picklelo" into the input. In this example, our
 ```json
 \{
     client_token: "abc123",
-    event_handler: "GithubState.set_profile",
+    event_handler: "GithubState1.set_profile",
     arguments: ["picklelo"]
 }
 ```

docs/components/conditional_rendering.md

@@ -277,7 +277,7 @@ from typing import List
 import reflex as rx
 
 
-class MatchState(rx.State):
+class CondMatchState(rx.State):
     cat_breed: str = ""
     animal_options: List[str] = [
         "persian",
@@ -292,7 +292,7 @@ class MatchState(rx.State):
 def match_demo():
     return rx.flex(
         rx.match(
-            MatchState.cat_breed,
+            CondMatchState.cat_breed,
             ("persian", rx.text("Persian cat selected.")),
             ("siamese", rx.text("Siamese cat selected.")),
             (
@@ -311,8 +311,8 @@ def match_demo():
                 "pug",
                 "corgi",
             ],
-            value=MatchState.cat_breed,
-            on_change=MatchState.set_cat_breed,
+            value=CondMatchState.cat_breed,
+            on_change=CondMatchState.set_cat_breed,
         ),
         direction="column",
         gap="2",

docs/wrapping-react/guide.md

@@ -15,7 +15,7 @@ class ColorPicker(rx.Component):
 color_picker = ColorPicker.create
 
 
-class ColorPickerState(rx.State):
+class ColorPickerState2(rx.State):
     color: str = "#db114b"
 ```
 
@@ -26,12 +26,12 @@ Let's walk step by step through how to wrap a React component in Reflex, using t
 ```python eval
 rx.box(
     rx.vstack(
-        rx.heading(ColorPickerState.color, color="white"),
+        rx.heading(ColorPickerState2.color, color="white"),
         color_picker(
-            on_change=ColorPickerState.set_color
+            on_change=ColorPickerState2.set_color
         ),
     ),
-    background_color=ColorPickerState.color,
+    background_color=ColorPickerState2.color,
     padding="5em",
     border_radius="1em",
     margin_bottom="1em",

docs/wrapping-react/overview.md

@@ -69,19 +69,19 @@ class ColorPicker(rx.Component):
 color_picker = ColorPicker.create
 
 
-class ColorPickerState(rx.State):
+class ColorPickerState1(rx.State):
     color: str = "#db114b"
 ```
 
 ```python eval
 rx.box(
     rx.vstack(
-        rx.heading(ColorPickerState.color, color="white"),
+        rx.heading(ColorPickerState1.color, color="white"),
         color_picker(
-            on_change=ColorPickerState.set_color
+            on_change=ColorPickerState1.set_color
         ),
     ),
-    background_color=ColorPickerState.color,
+    background_color=ColorPickerState1.color,
     padding="5em",
     border_radius="1em",
     margin_bottom="1em",