Initialize component state with value from another state

[bmaisonneuve]

Describe the bug I try to initialize an attribute of a ComponentState from the value of a global state but I have the error : Objects are not valid as a React child (found: object with keys {_js_expr, _var_type, _var_data, _original}). If you meant to render a collection of children, use an array instead.

Maybe this is not supposed to work but I couldn't find a clear way to initialize the attribute of my ComponentState.

To Reproduce Use code bellow. I use the example from the ComponentState example : https://reflex.dev/docs/state-structure/component-state/#passing-props

Code/Link to Repo

import reflex as rx

class MainState(rx.State):

    @rx.var
    def initial_value(self) -> int:
        return 7


class ReusableCounter(rx.ComponentState):
    count: int = 0

    @rx.event
    def increment(self):
        self.count += 1

    @rx.event
    def decrement(self):
        self.count -= 1

    @classmethod
    def get_component(cls, **props):

        initial_value = props.pop("initial_value", None)
        cls.__fields__["count"].default = initial_value
        return rx.hstack(
            rx.button("Decrement", on_click=cls.decrement),
            rx.text(cls.count),
            rx.button("Increment", on_click=cls.increment),
            **props
        )


reusable_counter = ReusableCounter.create


def render():
    return reusable_counter(initial_value=MainState.initial_value)

Note that this is working if I call the reusable_counter with a constant : reusable_counter(initial_value=7)

Expected behavior Is there a clean way to initialize the ComponentState from backend code ? I could use the frontend to pass the value back to backend (with the on_mount event for example) but this is not ideal.

Specifics (please complete the following information):

• Python Version: 3.10.12
• Reflex Version: 0.8.8
• OS: ubuntu

Additional context Good job with reflex, this is really nice :)