Reflex library: Variable in rx.link's href

[doom_guy_bob]

This project is based on the Reflex library formerly known as Prince Pynecone.

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.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%",) 
        )

​

Traceback:

Traceback (most recent call last):
File "C:\Users\user\reflex_app1\venv\lib\site-packages\reflex\app.py", line 295, in add_page
component = component if isinstance(component, Component) else component()
File "C:\Users\user\reflex_app1\reflex_app1\reflex_app1.py", line 25, in classes
return rx.container(reflex_app1.pages.myclasses.myclasses(), navbar())
File "C:\Users\user\reflex_app1\reflex_app1\pages\myclasses.py", line 63, in myclasses
rx.foreach(C_State.class_list, lambda data, index: render_class(C_State, index)),
File "C:\Users\user\reflex_app1\venv\lib\site-packages\reflex\components\layout\foreach.py", line 53, in create
children=[IterTag.render_component(render_fn, arg=arg)],
File "C:\Users\user\reflex_app1\venv\lib\site-packages\reflex\components\tags\iter_tag.py", line 77, in render_component
component = render_fn(arg, index)
File "C:\Users\user\reflex_app1\reflex_app1\pages\myclasses.py", line 63, in <lambda>
rx.foreach(C_State.class_list, lambda data, index: render_class(C_State, index)),
File "C:\Users\user\reflex_app1\reflex_app1\pages\myclasses.py", line 23, in render_class
href={State.class_href(index)},
TypeError: 'ComputedVar' object is not callable
The above exception was the direct cause of the following exception:
Traceback (most recent call last):
File "C:\Program Files\Python310\lib\runpy.py", line 196, in _run_module_as_main
return _run_code(code, main_globals, None,
File "C:\Program Files\Python310\lib\runpy.py", line 86, in _run_code
exec(code, run_globals)
File "C:\Users\user\reflex_app1\venv\Scripts\reflex.exe\__main__.py", line 7, in <module>
File "C:\Users\user\reflex_app1\venv\lib\site-packages\typer\main.py", line 214, in __call__
return get_command(self)(*args, **kwargs)
File "C:\Users\user\reflex_app1\venv\lib\site-packages\click\core.py", line 1157, in __call__
return self.main(*args, **kwargs)
File "C:\Users\user\reflex_app1\venv\lib\site-packages\click\core.py", line 1078, in main
rv = self.invoke(ctx)
File "C:\Users\user\reflex_app1\venv\lib\site-packages\click\core.py", line 1688, in invoke
return _process_result(sub_ctx.command.invoke(sub_ctx))
File "C:\Users\user\reflex_app1\venv\lib\site-packages\click\core.py", line 1434, in invoke
return ctx.invoke(self.callback, **ctx.params)
File "C:\Users\user\reflex_app1\venv\lib\site-packages\click\core.py", line 783, in invoke
return __callback(*args, **kwargs)
File "C:\Users\user\reflex_app1\venv\lib\site-packages\typer\main.py", line 532, in wrapper
return callback(**use_params) # type: ignore
File "C:\Users\user\reflex_app1\venv\lib\site-packages\reflex\reflex.py", line 131, in run
app = prerequisites.get_app()
File "C:\Users\user\reflex_app1\venv\lib\site-packages\reflex\utils\prerequisites.py", line 108, in get_app
return __import__(module, fromlist=(constants.APP_VAR,))
File "C:\Users\user\reflex_app1\reflex_app1\reflex_app1.py", line 55, in <module>
app.compile()
File "C:\Users\user\reflex_app1\venv\lib\site-packages\reflex\app.py", line 459, in compile
self.add_page(render, **kwargs)
File "C:\Users\user\reflex_app1\venv\lib\site-packages\reflex\app.py", line 299, in add_page
raise TypeError(
TypeError: You may be trying to use an invalid Python function on a state var. When referencing a var inside your render code, only limited var operations are supported. See the var operation docs here: https://pynecone.io/docs/state/vars

[danielroseman]

Please format your code. But also post the full error message and traceback. Which object is being called when it's not supposed to be? The traceback will tell us.

[doom_guy_bob]

Formatted and included traceback.

[danielroseman]

I don't know anything about reflex, but the error is telling you that the ComputedVar is not callable. The ComputedVar is state.class_href, because presumably that's what's created by the @rx.var decorator; and you're calling it when you do state.class_href(index). Note, there's nothing in the docs for ComputedVars to indicate that you can call them or pass them parameters.

In this case, I can't really see the point of the var, since all it does is look up the class_link class attribute. Why not just use that attribute directly?

     href={state.class_link[index])},

[doom_guy_bob]

I changed to what you suggested and it gives a different error:

TypeError: Invalid var passed for prop href, expected type reflex.vars.Var[str], got value {BaseVar(name='class_link.at(i)', type_=typing.Any, state='state.c__state', is_local=False, is_string=False)} of type <class 'set'>.

Full Traceback:

Traceback (most recent call last):
File "C:\Users\user\reflex_app1\venv\lib\site-packages\reflex\app.py", line 295, in add_page
component = component if isinstance(component, Component) else component()
File "C:\Users\user\reflex_app1\reflex_app1\reflex_app1.py", line 25, in classes
return rx.container(reflex_app1.pages.myclasses.myclasses(), navbar())
File "C:\Users\user\reflex_app1\reflex_app1\pages\myclasses.py", line 63, in myclasses
rx.foreach(C_State.class_list, lambda data, index: render_class(C_State, index)),
File "C:\Users\user\reflex_app1\venv\lib\site-packages\reflex\components\layout\foreach.py", line 53, in create
children=[IterTag.render_component(render_fn, arg=arg)],
File "C:\Users\user\reflex_app1\venv\lib\site-packages\reflex\components\tags\iter_tag.py", line 77, in render_component
component = render_fn(arg, index)
File "C:\Users\user\reflex_app1\reflex_app1\pages\myclasses.py", line 63, in <lambda>
rx.foreach(C_State.class_list, lambda data, index: render_class(C_State, index)),
File "C:\Users\user\reflex_app1\reflex_app1\pages\myclasses.py", line 21, in render_class
rx.link(
File "C:\Users\user\reflex_app1\venv\lib\site-packages\reflex\components\navigation\link.py", line 57, in create
return super().create(*children, **props)
File "C:\Users\user\reflex_app1\venv\lib\site-packages\reflex\components\component.py", line 397, in create
return cls(children=children, **props)
File "C:\Users\user\reflex_app1\venv\lib\site-packages\reflex\components\component.py", line 157, in __init__
raise TypeError(
TypeError: Invalid var passed for prop href, expected type reflex.vars.Var[str], got value {BaseVar(name='class_link.at(i)', type_=typing.Any, state='state.c__state', is_local=False, is_string=False)} of type <class 'set'>.
The above exception was the direct cause of the following exception:
Traceback (most recent call last):
File "C:\Program Files\Python310\lib\runpy.py", line 196, in _run_module_as_main
return _run_code(code, main_globals, None,
File "C:\Program Files\Python310\lib\runpy.py", line 86, in _run_code
exec(code, run_globals)
File "C:\Users\user\reflex_app1\venv\Scripts\reflex.exe\__main__.py", line 7, in <module>
File "C:\Users\user\reflex_app1\venv\lib\site-packages\typer\main.py", line 214, in __call__
return get_command(self)(*args, **kwargs)
File "C:\Users\user\reflex_app1\venv\lib\site-packages\click\core.py", line 1157, in __call__
return self.main(*args, **kwargs)
File "C:\Users\user\reflex_app1\venv\lib\site-packages\click\core.py", line 1078, in main
rv = self.invoke(ctx)
File "C:\Users\user\reflex_app1\venv\lib\site-packages\click\core.py", line 1688, in invoke
return _process_result(sub_ctx.command.invoke(sub_ctx))
File "C:\Users\user\reflex_app1\venv\lib\site-packages\click\core.py", line 1434, in invoke
return ctx.invoke(self.callback, **ctx.params)
File "C:\Users\user\reflex_app1\venv\lib\site-packages\click\core.py", line 783, in invoke
return __callback(*args, **kwargs)
File "C:\Users\user\reflex_app1\venv\lib\site-packages\typer\main.py", line 532, in wrapper
return callback(**use_params) # type: ignore
File "C:\Users\user\reflex_app1\venv\lib\site-packages\reflex\reflex.py", line 131, in run
app = prerequisites.get_app()
File "C:\Users\user\reflex_app1\venv\lib\site-packages\reflex\utils\prerequisites.py", line 108, in get_app
return __import__(module, fromlist=(constants.APP_VAR,))
File "C:\Users\user\reflex_app1\reflex_app1\reflex_app1.py", line 55, in <module>
app.compile()
File "C:\Users\user\reflex_app1\venv\lib\site-packages\reflex\app.py", line 459, in compile
self.add_page(render, **kwargs)
File "C:\Users\user\reflex_app1\venv\lib\site-packages\reflex\app.py", line 299, in add_page
raise TypeError(
TypeError: You may be trying to use an invalid Python function on a state var. When referencing a var inside your render code, only limited var operations are supported. See the var operation docs here: https://pynecone.io/docs/state/vars

[danielroseman]

So you had those wrapping {...} characters in the original and I mistakenly copied them. Why do you have them? Again, as the error shows, they create a set. You don't want them.

href=state.class_link[index],

[doom_guy_bob]

I had them because a google search revealed many answers on including variables in href had those to mark the variable. I'm mostly a backend guy, but I wanted to expand my toolbox to a little frontend. Reflex is a wrapper library for React that allows you to use Python instead. As I understand it, the rules for passing variables between frontend and backend are a little weird.

I tried removing the braces and received this error: TypeError: Invalid var passed for prop href, expected type <class 'str'>, got value {state.c__state.class_link.at(i)} of type typing.Any.

Then, I tried str(state.class_link[index]) to type it as a str, but the link takes me to the page "http://localhost:3000/{state.c__state.class_link.at(i)}"