How to reference state within a single render UI function ?

[yellowbean]

The State would have a list of recipes, which I can use rx.foreach to render them all into the UI .
While, I would like user to edit the recipes and with on_change event to update the recipes in the UI, but how to implement that in the
RecipesUI function ?

is there syntax that points to the item to be updated ?

State.set_listOfRecipes_<N>_val , which points to the "State.ListOfRecipes" and the Nth item, with field name "val" ?

Great work , thank you all for the help !

---

class Receipes(rx.Base):
    path: str
    val: list[str]

class State(rx.State):
    """The app state."""
    listOfRecipes :list[Receipes] = [Receipes(path="P1",val=["va1","va2"])
                                                      ,Receipes(path="P2",val=["va1","va2"]) ]


def RecipesUI(x:Receipes):
    return rx.box(
        rx.input(value=x.path, )
        ,rx.input(value=str(x.val))    ## <<-- how to add  on_changeto update the Recipe values in the State ? 
                                                   ## something like on_change=State.set_listOfRecipes_<N>_val ? 
    )

def index() -> rx.Component:
    return rx.center(
        rx.tabs.list(
            rx.tabs.trigger("BaseCase", value="base_case"),
            rx.tabs.trigger("Recipes", value="recipes"),
        ),
        rx.tabs.content(
            rx.text("BaseCase"),
        ),
        rx.tabs.content(
            rx.text("Recipes"),
            rx.foreach(
                State.listOfRecipes, RecipesUI
            ),
            value="recipes",
        ),
    )

[masenf]

There are a few ways to go about it; if you're fine with the user entering a comma separated list, then you can define an event handler for on_change which splits the list on comma and assigns it to the appropriate Recipe object

def update_recipe_values(self, recipe_path, value):
    for recipe in self.listOfRecipes:
        if recipe.path == recipe_path:
            recipe.val = [v.strip() for v in value.split(",")]

then have your event handler do the reverse

rx.input(value=x.val.join(","), on_change=lambda v: State.update_recipe_values(x.path, v))

[yellowbean]

Do you think it is possible to add a enumerate alike to rx.foreachEnum() ? the goal is passing around "index" down to the UI component and make the event with arguments.

class State(rx.State):
  """The app state."""
  listOfRecipes :list[Receipes] = [Receipes(path="P1",val=["va1","va2"])
    
  def updateRecipe(self, val, idx):
         self.listOfRecipes[idx].val = val

def RecipesUI(x:Receipes, index:int):
  return rx.box(
      rx.input(value=x.path, )
      ,rx.input(value=str(x.val), on_change = lambda v : State.updateRecipe( v, index)  
  )


  rx.tabs.content(
      rx.text("Recipes"),
      rx.foreachEnum(
          State.listOfRecipes, RecipesUI
      ),
      value="recipes",
  ),

[masenf]

did you try it? that should already work with normal rx.foreach: https://reflex.dev/docs/components/rendering-iterables/#enumeration

[masenf]

as an aside, i don't think str(x.val) will do what you want; x.val is a Var, so if you take the str of it, then you'll just get the name of the variable that will be used on the frontend.

if you want the json representation, do x.val.to_string()

[yellowbean]

Thanks to @masenf

foreach can be nested with index, here is my code that works

rx.tabs.content(
    rx.text("Recipes"),
    rx.text(f"{State.listOfRecipes[1].path}"),
    rx.foreach(
        State.listOfRecipes, lambda r, index: rx.box( rx.input(value=r.path, on_change=lambda _v : State.updatePath(_v, index))
            , rx.foreach(r.val, lambda recipeVal, colIndex: rx.input(value=recipeVal, on_change=lambda _v : State.updateVal( _v, index, colIndex)))
        )
    ),
    value="recipes",
),