Reflex Logo

Intro

Gallery

Hosting

Components

New

Learn

Components

API Reference

Onboarding

Components

/

Rendering-iterables

You will often want to display multiple similar components from a collection of data. The rx.foreach component takes an iterable (list, tuple or dict) and a function that renders each item in the list. This is useful for dynamically rendering a list of items defined in a state.

In this first simple example we iterate through a list of colors and render the name of the color and use this color as the background for that rx.box. As we can see we have a function colored_box that we pass to the rx.foreach component. This function renders each item from the list that we have defined as a state var color.

red

green

blue

yellow

orange

purple

class IterState(rx.State):
    color: list[str] = [
        "red",
        "green",
        "blue",
        "yellow",
        "orange",
        "purple",
    ]


def colored_box(color: str):
    return rx.box(rx.text(color), background_color=color)


def simple_foreach():
    return rx.grid(
        rx.foreach(IterState.color, colored_box),
        columns="6",
    )

The function can also take an index as a second argument, meaning that we can enumerate through data as shown in the example below.

0

1

2

3

4

5

class IterIndexState(rx.State):
    color: list[str] = [
        "red",
        "green",
        "blue",
        "yellow",
        "orange",
        "purple",
    ]


def enumerate_foreach():
    return rx.grid(
        rx.foreach(
            IterIndexState.color,
            lambda color, index: rx.box(
                rx.text(index), bg=color
            ),
        ),
        columns="6",
    )

We can iterate through a dict data structure 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

class SimpleDictIterState(rx.State):
    color_chart: dict[str, str] = {
        "sky": "blue",
        "balloon": "red",
        "grass": "green",
    }


def display_color(color: list):
    # color is presented as a list key-value pairs [("sky", "blue"), ("balloon", "red"), ("grass", "green")]
    return rx.box(
        rx.text(color[0]), bg=color[1], padding_x="1.5em"
    )


def dict_foreach():
    return rx.grid(
        rx.foreach(
            SimpleDictIterState.color_chart,
            display_color,
        ),
        columns="3",
    )

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.

Next.jsPrismaTailwindGoogle CloudDockerMySQL
PythonFlaskGoogle CloudDocker
class NestedStateFE(rx.State):
    projects: list[dict[str, list]] = [
        {
            "technologies": [
                "Next.js",
                "Prisma",
                "Tailwind",
                "Google Cloud",
                "Docker",
                "MySQL",
            ]
        },
        {
            "technologies": [
                "Python",
                "Flask",
                "Google Cloud",
                "Docker",
            ]
        },
    ]


def get_badge(technology: str) -> rx.Component:
    return rx.badge(
        technology, variant="soft", color_scheme="green"
    )


def project_item(project: dict) -> rx.Component:
    return rx.box(
        rx.hstack(
            rx.foreach(project["technologies"], get_badge)
        ),
    )


def projects_example() -> rx.Component:
    return rx.box(
        rx.foreach(NestedStateFE.projects, project_item)
    )

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

class NestedDictIterState(rx.State):
    color_chart: dict[str, list[str]] = {
        "purple": ["red", "blue"],
        "orange": ["yellow", "red"],
        "green": ["blue", "yellow"],
    }


def display_colors(color: list[str, list[str]]):
    return rx.vstack(
        rx.text(color[0], color=color[0]),
        rx.hstack(
            rx.foreach(
                color[1],
                lambda x: rx.box(
                    rx.text(x, color="black"), bg=x
                ),
            )
        ),
    )


def nested_dict_foreach():
    return rx.grid(
        rx.foreach(
            NestedDictIterState.color_chart,
            display_colors,
        ),
        columns="3",
    )

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
class ToDoListItem(rx.Base):
    item_name: str
    is_packed: bool


class ForeachCondState(rx.State):
    to_do_list: list[ToDoListItem] = [
        ToDoListItem(
            item_name="Space suit", is_packed=True
        ),
        ToDoListItem(item_name="Helmet", is_packed=True),
        ToDoListItem(
            item_name="Back Pack", is_packed=False
        ),
    ]


def render_item(item: [str, bool]):
    return rx.cond(
        item.is_packed,
        rx.list.item(item.item_name + " ✔"),
        rx.list.item(item.item_name),
    )


def packing_list():
    return rx.vstack(
        rx.text("Sammy's Packing List"),
        rx.list(
            rx.foreach(
                ForeachCondState.to_do_list, render_item
            )
        ),
    )
← Conditional RenderingLibrary →

Did you find this useful?