Variable in rx.link's href

[chimeracle]

How would I craft a variable based on a list index and then use that variable in a rx.link's href value? Below in the render_class function, I'm getting tripped up with the error message "ComputedVar" object is not callable. I've tried looking at the documentation's State > Var section and mimicking the computed variable section, but this doesn't appear to be the answer or I'm implementing it wrong. Bonus points if anyone has any clues as to how to integrate a clickable link in rx.datatable based off a dataframe instead as that was my initial idea(hence the aforementioned items in the code).

What am I doing wrong? Bear in mind this is part of an app and I'm adding this page and base state elsewhere, so there's no main method at the bottom.

import pandas as pd
import reflex as rx
from reflex_app1.base_state import State as base_state


class C_State(base_state):
    data = {'Class': ['Class1', 'Class2', 'Class3'], 'Link': ['/class1a', '/class2a', '/class3a']}
    df_classes = pd.DataFrame(data=data)
    class_list = ['Class1', 'Class2', 'Class3']
    class_link = ['/class1', '/class1', '/class1']

    @rx.var
    def class_href(self, index) -> str:
        return self.class_link[index]


def render_class(state, index):
    return rx.tr(
            rx.td(state.class_list[index]),
            rx.td(
                rx.link(
                    "Take the class",
                    href={state.class_href(index)},
                    border="0.1em solid",
                    padding="0.5em",
                    spacing="3em",
                    border_radius="0.3em",
                    _hover={
                        "color": "rgb(107,99,246)",
                    },
                ),),
    )


def myclasses():
    return rx.container(rx.center(
        rx.vstack(
            rx.heading("Classes", font_size="2em"),
            rx.box("Your currently available classes "),
            rx.link(
                "Intro Quiz",
                href="/class1a",
                border="0.1em solid",
                padding="0.5em",
                border_radius="0.5em",
                _hover={
                    "color": "rgb(107,99,246)",
                },
            ),
            rx.data_table(
                data=C_State.df_classes,
                pagination=True,
                search=True,
                sort=True,
            ),
            rx.table(
                rx.thead(
                    rx.tr(
                        rx.th("Class"),
                        rx.th("Link"),
                    )
                ),
                rx.foreach(C_State.class_list, lambda data, index: render_class(C_State, index)),
            ),
            spacing="1.5em",
            font_size="2em",
        ),
        padding_top="10%",
    )
    )

[masenf]

A computed var cannot take arguments, it must purely be a function of the state...

1. add an annotation to your class_link list, so reflex knows it's a List[str], since href is required to be a str
2. index directly into class_link, similarly to how the code indexes into class_name
3. Missing rx.tbody in your rx.table leads to a hydration error

The following snippet appears to be working for me, hopefully this helps.

from typing import List

import reflex as rx


class State(rx.State):
    class_list = ['Class1', 'Class2', 'Class3']
    class_link: List[str] = ['/class1', '/class2', '/class3']


def render_class(state, index):
    return rx.tr(
            rx.td(state.class_list[index]),
            rx.td(
                rx.link(
                    "Take the class",
                    href=state.class_link[index],
                    border="0.1em solid",
                    padding="0.5em",
                    spacing="3em",
                    border_radius="0.3em",
                    _hover={
                        "color": "rgb(107,99,246)",
                    },
                ),),
    )


def index() -> rx.Component:
    return rx.container(rx.center(
        rx.vstack(
            rx.heading("Classes", font_size="2em"),
            rx.box("Your currently available classes "),
            rx.link(
                "Intro Quiz",
                href="/class1a",
                border="0.1em solid",
                padding="0.5em",
                border_radius="0.5em",
                _hover={
                    "color": "rgb(107,99,246)",
                },
            ),
            rx.table(
                rx.thead(
                    rx.tr(
                        rx.th("Class"),
                        rx.th("Link"),
                    )
                ),
                rx.tbody(
                    rx.foreach(State.class_list, lambda data, index: render_class(State, index)),
                ),
            ),
            spacing="1.5em",
            font_size="2em",
        ),
        padding_top="10%",
    )
    )


# Add state and page to the app.
app = rx.App()
app.add_page(index)
app.compile()

[chimeracle]

@masenf Thank you! That worked.
I'm now running into the issue that if I turn this page's state into a child state deriving from a base state, the foreach index no longer works and I get the first item in each list on every line of the table. It still gives me 3 rows on the table, indicating it sees the length of the list. This pages state remains as you have it and the base state has variables that are not referenced on this page specifically. Any ideas on what is causing the index to come back as "0" for each?

[masenf]

If you post code snippet, I'll take a look

[chimeracle]

Myclasses.py:

import reflex as rx
from reflex_app1.base_state import State as baseState
from typing import List


class CState(baseState):
    class_list: List[str] = ['Class1', 'Class2', 'Class3']
    class_link: List[str] = ['/class1a', '/class2a', '/class3a']


def render_class(state, index):
    return rx.tr(
            rx.td(state.class_list[index]),
            rx.td(
                rx.link(
                    "Take the class",
                    href=state.class_link[index],
                    padding="0.5em",
                    spacing="1em",
                    _hover={
                        "color": "rgb(107,99,246)",
                    },
                ),),
    )


def myclasses():
    return rx.container(rx.center(
        rx.vstack(
            rx.heading("Classes", font_size="2em"),
            rx.box("Your currently available classes ", rx.code("Introductory Quiz", font_size="1em")),
            rx.link(
                "Intro Quiz",
                href="/class1a",
                border="0.1em solid",
                padding="0.5em",
                border_radius="0.5em",
                _hover={
                    "color": "rgb(107,99,246)",
                },
            ),
            rx.table(
                rx.thead(
                    rx.tr(
                        rx.th("Class"),
                        rx.th("Link"),
                    )
                ),
                rx.tbody(
                    rx.foreach(CState.class_list, lambda course, index: render_class(CState, index)),
                ),
            ),
            spacing="1.5em",
            font_size="2em",
        ),
        padding_top="10%",
    )
    )
```

reflex_app1:

```
import reflex as rx
import reflex_app1.pages.index
from .base_state import State
from reflex_app1.pages.quizzes import Quiz_State
from reflex_app1.pages import index, grades, myclasses, quizzes, class1
from reflex_app1.components.navbar import navbar


def container(*children, **kwargs):
    kwargs = {"max_width": "1440px", "padding_x": ["1em", "2em", "3em"], **kwargs}
    return rx.container(
        *children,
        **kwargs,
    )


@rx.route("/")
def index():
    return rx.container(reflex_app1.pages.index.index(), navbar())


@rx.route("/classes")
def classes():
    return rx.container(reflex_app1.pages.myclasses.myclasses(), navbar())


@rx.route("/grades")
def grades():
    return rx.container(reflex_app1.pages.grades.grades(), navbar())


@rx.route("/class1a")
def class1a():
    return rx.container(reflex_app1.pages.class1.class1a(), navbar())


@rx.route("/class1b")
def class1b():
    return rx.container(reflex_app1.pages.class1.class1b(), navbar())


@rx.route("/quiz", on_load=Quiz_State.onload)
def quiz():
    return rx.container(reflex_app1.pages.quizzes.quiz(), navbar())


@rx.route("/result")
def result():
    return rx.container(reflex_app1.pages.quizzes.result(), navbar())


# Add state and page to the app.
app = rx.App(state=State)
app.compile()
```


base_state.py:
```
import reflex as rx


class State(rx.State):
    """The base state."""
    current_user: str = None
```

[masenf]

hmm, i'm not able to reproduce the issue that you describe, and cannot run the code directly; so i just extended my example to use a base_state defined in another example and updated the foreach to reference the child state CState, and this still seems to be working on my end.

from typing import List

import reflex as rx

from .base_state import State as baseState


class CState(baseState):
    class_list = ['Class1', 'Class2', 'Class3']
    class_link: List[str] = ['/class1', '/class2', '/class3']


def render_class(state, index):
    return rx.tr(
            rx.td(state.class_list[index]),
            rx.td(
                rx.link(
                    "Take the class",
                    href=state.class_link[index],
                    border="0.1em solid",
                    padding="0.5em",
                    spacing="3em",
                    border_radius="0.3em",
                    _hover={
                        "color": "rgb(107,99,246)",
                    },
                ),),
    )


def index() -> rx.Component:
    return rx.container(rx.center(
        rx.vstack(
            rx.heading("Classes", font_size="2em"),
            rx.box("Your currently available classes "),
            rx.link(
                "Intro Quiz",
                href="/class1a",
                border="0.1em solid",
                padding="0.5em",
                border_radius="0.5em",
                _hover={
                    "color": "rgb(107,99,246)",
                },
            ),
            rx.table(
                rx.thead(
                    rx.tr(
                        rx.th("Class"),
                        rx.th("Link"),
                    )
                ),
                rx.tbody(
                    rx.foreach(CState.class_list, lambda data, index: render_class(CState, index)),
                ),
            ),
            spacing="1.5em",
            font_size="2em",
        ),
        padding_top="10%",
    )
    )


# Add state and page to the app.
app = rx.App()
app.add_page(index)
app.compile()

(base_state.py is defined exactly how you have it above)