How to add a component with event handler?

[fsmosca]

I created an app menu item for a sample counter and temperature components that I would like to add. I clone the repo and have not use the rf-init command. I am on windows 10.

config.py

"navigation": {
    "home": {
        "getting started": "start.py"
    },
    "app": {
        "introduction": "intro.py",
        "temperature": "temperature.py",
        "counter": "counter.py",
    }
},

The counter.py has this entry.

# Main content area: takes in rx.Componenets and passes them to base file
def __components__(self):
    return [
        # add your components below #
        CounterComponent()
        # end your components above #
    ]

That CounterComponent() is an import from my content folder.

from content.counter import CounterComponent

The content folder is under the reflexify folder.

My content/counter.py

from app.states.mainState import MainState
import reflex as rx


class CounterState(MainState):
    count: int = 0

    def increment(self):
        self.count += 1

    def decrement(self):
        self.count -= 1


def CounterComponent():
    return rx.box(
        rx.text('Counter App', font_size='1.5em'),
        rx.spacer(),
        rx.hstack(
            rx.button(rx.icon(tag='add'), color='green',
                      on_click=CounterState.increment
            ),
            rx.text(CounterState.count),
            rx.button(rx.icon(tag='minus'), color='red',
                      on_click=CounterState.decrement
            )
        )
    )

What is the issue?

The issue is that when you press the plus or minus button, the counter is unresponsive, meaning if you press the plus sign, the counter shown will not change, similar to minus sign.

[LineIndent]

I tested this on my end and it worked:

This is what I did:

1. In the file where you want to put the counter:

from app.core.base import RxBasePage
from app.helpers.nav_helpers import NavHelper
import reflex as rx
from app.states.counterState import CounterState

def CounterComponent():
    return rx.box(
        rx.text("Counter App", font_size="1.5em"),
        rx.spacer(),
        rx.hstack(
            rx.button(
                rx.icon(tag="add"), color="green", on_click=CounterState.increment
            ),
            rx.text(f"{CounterState.count}"),
            rx.button(
                rx.icon(tag="minus"), color="red", on_click=CounterState.decrement
            ),
        ),
    )


class RxPage:
    # Title of page: must match high-level key in config.py
    def __title__(self):
        return "Reflexfy"

    # Page route path: must follow /parent-key/file-name *without .py extension*
    def __route__(self):
        return "/"

    # Left navigation panel: automated based on config navigation order
    def __left_navigation__(self):
        nav: list = NavHelper.__get_left_navigation__(self.__title__())
        return NavHelper.__set_left_navigation__(nav)

    # Right navigation panel: TBD
    def __right__navigation__(self):
        return []

    # Mobile navigation drop down
    def __mobile_navigation__(self):
        return NavHelper.__get_left_navigation__(self.__title__())

    # Main content area: takes in rx.Componenets and passes them to base file
    def __components__(self):
        return [CounterComponent()]

    # Build method: creates a new instance for the page above
    def build(self):
        page = RxBasePage(
            self.__components__(),
            self.__left_navigation__(),
            self.__right__navigation__(),
            self.__mobile_navigation__(),
        )
        return page.build()

2. Place your states all in the states folder - it'll be easier to organize and keep track of. Inside of states i created a file called counterState.py and placed the following code as such:

from .mainState import MainState

class CounterState(MainState):
    count: int = 0

    def increment(self):
        self.count += 1

    def decrement(self):
        self.count -= 1

This i what I did and the counter worked.
Don't place your own components, like the counter, outside the app folder. This messes with the path, even if you're using Reflex plainly, always place the files inside the main directory. So for example, your content folder, place it inside the app folder and this way you'll have access to it easily.

[fsmosca]

Thanks it worked.