Componentstate

reflex.state.ComponentState

Base class to allow for the creation of a state instance per component.

This allows for the bundling of UI and state logic into a single class, where each instance has a separate instance of the state.

Subclass this class and define vars and event handlers in the traditional way. Then define a get_component method that returns the UI for the component instance.

See the full docs for more.

Basic example:

# Subclass ComponentState and define vars and event handlers.
class Counter(rx.ComponentState):
    # Define vars that change.
    count: int = 0

    # Define event handlers.
    def increment(self):
        self.count += 1

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

    @classmethod
    def get_component(cls, **props):
        # Access the state vars and event handlers using `cls`.
        return rx.hstack(
            rx.button("Decrement", on_click=cls.decrement),
            rx.text(cls.count),
            rx.button("Increment", on_click=cls.increment),
            **props,
        )

counter = Counter.create()