Dibujar listas: rx.foreach

Las vistas en las que el mismo elemento se repite varias veces, como una lista de tareas, unos comentarios o unas tarjetas de producto, se dibujan a partir de una lista de datos. En esta lección usarás rx.foreach para mostrar en pantalla una lista guardada en el State.

3-1. Dibujar una lista con rx.foreach (3 min)

class ListState(rx.State):
    items: list[str] = ["Apple", "Banana", "Cherry"]


def render_item(item: rx.Var[str]):
    # Render a single item.
    # Note that item here is a Var, not a str!
    return rx.list.item(item)


def show_fruits():
    return rx.list.unordered(
        rx.foreach(ListState.items, render_item),
    )

A rx.foreach le pasas dos cosas:

1. Una Var de tipo lista: ListState.items
2. Una función que dibuja un solo elemento: render_item. Se pasa la función en sí, sin paréntesis.

Reflex aplica render_item a cada elemento de la lista y crea un componente para cada uno. Si más adelante se añaden o quitan elementos de la lista, la lista de la pantalla también cambia. Lo comprobarás tú mismo con la cesta de frutas de la lección 6.

3-2. item no es un string, es una Var (2 min)

Fíjate en un detalle importante: el tipo del item que recibe render_item no es str, sino rx.Var[str].

• render_item también es una función de la interfaz, así que se ejecuta una sola vez, al arrancar la app. En ese momento no se sabe qué habrá en la lista, de modo que item es una Var que apunta a "un valor que se rellenará más tarde".
• Por eso no puedes usar funciones integradas de Python como len(item). En su lugar, usas las operaciones de Var que Reflex ofrece para las Var: item.length() da el número de caracteres e item.upper(), el valor en mayúsculas. Esto también es el tema de la lección 4.

Por la misma razón, una comprensión de listas de Python como [rx.list.item(i) for i in ListState.items] tampoco funciona. Para recorrer una lista del State, usa siempre rx.foreach.

Ejercicios

1. Añade dos frutas más a items y comprueba que aparecen en pantalla.
2. Cambia render_item para que devuelva rx.badge(item) en lugar de rx.list.item. Los mismos datos se dibujarán con otro aspecto.
3. Crea un manejador de eventos que añada una fruta a items al pulsar un botón. La solución está en la lección 6.

Lista de comprobación de esta lección

• Sé decir qué dos cosas se le pasan a rx.foreach.
• Entiendo por qué el valor que recibe la función que dibuja cada elemento es una Var.
• Sé que, para las listas del State, se usa rx.foreach en lugar de una comprensión de listas.