Filtering variables

[aputhuraya]

I am struggling with understanding how to filter a variable in Reflex, for example, like the "target_submission" defined below:

class TargetState(AuthState):
    target_submissions: list[Dict] = []

Whenever I try anything like list comprehension (or any other vanilla python approaches) to filter this, it throws the following error:

reflex.utils.exceptions.VarTypeError: Cannot iterate over Var 'compensation.states.target_state.TargetState.target_submissions'. Instead use rx.foreach.

And when I try to use "rx.foreach", I have not found any documentation on how to filter objects inside it.
Any help is much appreciated, thank you!

[masenf]

there are two well supported ways of approaching this:

1. Use a computed var

Define an @rx.var method in your state that performs the needed filtering. Whenever the data or the filter criteria change, the computed var will be recalculated automatically.

class TargetState(rx.State):
    _target_submissions: list[Dict] = []

    @rx.var
    def filtered_submissions(self) -> list[dict]:
        return {s for s in self._target_submissions if s.get("active")}

...

def index():
    return rx.vstack(
        rx.foreach(TargetState.filtered_submissions, lambda s: submission_card(submission=s)),
    )

This is preferable, because you can make your unfiltered data var a backend-only var (leading underscore) and avoid having it sent to the frontend; instead send only the (likely smaller) filtered dataset to the frontend and render it completely with rx.foreach.

This is also nice, because it keeps more of logic in "normal python", which is easier to understand and reason about.

2. use rx.cond to create javascript code that does the filtering

For simple conditions, it might be easier to filter the list on the frontend:

def index():
    return rx.vstack(
        rx.foreach(
            TargetState.target_submissions,
            lambda s: rx.cond(s.active, submission_card(submission=s), rx.fragment()),
        )
    )

[aputhuraya]

Thank you so much!