Rendering Iterables
Recall again from the basics that we cannot use Python for
loops when referencing state vars in Reflex. Instead, use the rx.foreach
component to render components from a collection of data.
Here's the same example using a lambda function.
You can also use lambda functions directly with components without defining a separate function.
In this first simple example we iterate through a list
of colors and render a dynamic number of buttons.
The first argument of the rx.foreach
function is the state var that you want to iterate through. The second argument is a function that takes in an item from the data and returns a component. In this case, the colored_box
function takes in a color and returns a button with that color.
For vs Foreach
Regualar For Loop
* Use when iterating over constants.Foreach
* Use when iterating over state vars.Regualar For Loop
* Use when iterating over constants.Foreach
* Use when iterating over state vars.The above example could have been written using a regular Python for
loop, since the data is constant.
However, as soon as you need the data to be dynamic, you must use rx.foreach
.
Render Function
The function to render each item can be defined either as a separate function or as a lambda function. In the example below, we define the function colored_box
separately and pass it to the rx.foreach
function.
Notice that the type annotation for the color
parameter in the colored_box
function is rx.Var[str]
(rather than just str
). This is because the rx.foreach
function passes the item as a Var
object, which is a wrapper around the actual value. This is what allows us to compile the frontend without knowing the actual value of the state var (which is only known at runtime).
Enumerating Iterables
The function can also take an index as a second argument, meaning that we can enumerate through data as shown in the example below.
Here's the same example using a lambda function.
Iterating Dictionaries
We can iterate through a dict
using a foreach
. When the dict is passed through to the function that renders each item, it is presented as a list of key-value pairs [("sky", "blue"), ("balloon", "red"), ("grass", "green")]
.
sky
balloon
grass
Nested examples
rx.foreach
can be used with nested state vars. Here we use nested foreach
components to render the nested state vars. The rx.foreach(project["technologies"], get_badge)
inside of the project_item
function, renders the dict
values which are of type list
. The rx.box(rx.foreach(NestedStateFE.projects, project_item))
inside of the projects_example
function renders each dict
inside of the overall state var projects
.
If you want an example where not all of the values in the dict are the same type then check out the example on var operations using foreach.
Here is a further example of how to use foreach
with a nested data structure.
purple
red
blue
orange
yellow
red
green
blue
yellow
Foreach with Cond
We can also use foreach
with the cond
component.
In this example we define the function render_item
. This function takes in an item
, uses the cond
to check if the item is_packed
. If it is packed it returns the item_name
with a ✔
next to it, and if not then it just returns the item_name
. We use the foreach
to iterate over all of the items in the to_do_list
using the render_item
function.
Sammy's Packing List
- Space suit ✔
- Helmet ✔
- Back Pack