about TypeError: Cannot iterate over Var 'state__person_state.persons'. Instead use xt.foreach.

[brejce]

this is code:

class Person():
    def __init__(self, name_: str = "", email_: str = "", age_: int = 18):
        self.name: str = name_
        self.email: str = email_
        self.age: int = age_
class PersonState(xt.State):
    persons: list[Person] = []
    def addPerson(self, pr: Person):
        if isinstance(pr, Person):
            self.persons.append(pr)
        else:
            raise TypeError(
                "Only objects of type Person can be added to persons list.")
    def create(self):
        # Simulation adds data
        L = [1, 2, 3, 4, 5, 6]
        for l in L:
            self.addPerson(Person(name_=f"name{l}", email_=f"name{l}@email.com", age_=l+18))
def display_persons()->xt.Component:
    return xt.vstack([xt.text(f"Name: {person.name}, Age: {person.age}") for person in PersonState.persons])
@template(route="/test1", title="test1", image="/github.svg")
def test1() -> xt.Component:
    return xt.vstack(
            xt.button(
            "fill data",
            on_click=PersonState.create()
        ),
        xt.heading("Results"),
        display_persons(),
    )

this is error:

  File "/home/brejce/Program/learnnextpy/learnnextpy/pages/test1.py", line 109, in display_persons
    return xt.vstack([xt.text(f"Name: {person.name}, Age: {person.age}") for person in PersonState.persons])
                     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/home/brejce/.local/share/virtualenvs/learnnextpy-jxEzBTms/lib/python3.11/site-packages/nextpy/backend/vars.py", line 464, in __iter__
    raise TypeError(
TypeError: Cannot iterate over Var 'state__person_state.persons'. Instead use `xt.foreach`.

but if use xt.foreach:

# change code to:
def test1() -> xt.Component:
    return xt.box(
            xt.button(
            "fill data",
            on_click=PersonState.create()
        ),
        xt.heading("Results"),
        xt.responsive_grid(
            xt.foreach(PersonState.persons, lambda obj: xt.vstack(xt.text(obj.name))),
            columns=[1, 1, 2, 3, 4, 5],
            gap=2,
        ),
    )

got this error:

  File "/home/brejce/Program/learnnextpy/learnnextpy/pages/test1.py", line 120, in <lambda>
    xt.foreach(PersonState.persons, lambda obj: xt.vstack(xt.text(obj.name))),
                                                                  ^^^^^^^^
  File "/home/brejce/.local/share/virtualenvs/learnnextpy-jxEzBTms/lib/python3.11/site-packages/nextpy/backend/vars.py", line 614, in __getattr__
    raise AttributeError(
AttributeError: The State var `obj` has no attribute 'name' or may have been annotated wrongly.

So what happened?

I just want to display multiple Person on the page. /(ㄒoㄒ)/~~