List of ComponentState as Frontend Var Breaks

[sebastianjanisch]

Describe the bug
When using ComponentState instances inside front-end variables for dynamic rendering of components, exceptions are raised.

To Reproduce
Steps to reproduce the behavior:

• Code/Link to Repo:

import asyncio
import reflex as rx


class MessageComponent(rx.ComponentState):

    message: str = ""

    @classmethod
    def get_component(cls, size: str) -> rx.Component:
        return rx.flex(
            rx.text(f"My text: {cls.message}", size=size),
            rx.markdown(f"*My markdown*: {cls.message}", size=size),
        )


message_component = MessageComponent.create

class BugState(rx.State):

    _messages: list[MessageComponent] = []

    @rx.var()
    def messages(self) -> rx.Component:
        return rx.vstack(
            *[m for m in self._messages]
        )

    async def add_message(self):
        self._messages.append(message_component(size="3"))

        for e in "This is a test message!".split():
            self._messages[-1].State.message += e
            yield
            await asyncio.sleep(0.1)


@rx.page(route="/test")
def bug() -> rx.Component:
    return rx.vstack(
        message_component(size="6"),
        BugState.messages,
        rx.button("Add Message", on_click=BugState.add_message),
        width="100%",
    )

Expected behavior
I should be able to add different ComponentState instances to a backend list var and then render them through a front end variable. The broader context is to create different UI components based on dynamic criteria.

Screenshots
If applicable, add screenshots to help explain your problem.

Specifics (please complete the following information):

• Python Version: 3.11
• Reflex Version: 0.6.2.post1
• OS: OSX
• Browser (Optional): Chrome

Additional context
Add any other context about the problem here.

[benedikt-bartscher]

This requires "dynamic state" which is currently not implemented in reflex. Take a look here #3718