From c70cba1e7c56d817270f6987b50650427e2749c4 Mon Sep 17 00:00:00 2001
From: Khaleel Al-Adhami <khaleel.aladhami@gmail.com>
Date: Sun, 8 Sep 2024 19:14:56 -0700
Subject: [PATCH] add fragment to foreach (#3877)

---
 integration/test_var_operations.py                | 12 ++++++++++++
 reflex/.templates/jinja/web/pages/utils.js.jinja2 |  4 ++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/integration/test_var_operations.py b/integration/test_var_operations.py
index bd9db2d8ad..2feb80ae0d 100644
--- a/integration/test_var_operations.py
+++ b/integration/test_var_operations.py
@@ -593,6 +593,16 @@ def index():
                 int_var2=VarOperationState.int_var2,
                 id="memo_comp_nested",
             ),
+            # foreach in a match
+            rx.box(
+                rx.match(
+                    VarOperationState.list3.length(),
+                    (0, rx.text("No choices")),
+                    (1, rx.text("One choice")),
+                    rx.foreach(VarOperationState.list3, lambda choice: rx.text(choice)),
+                ),
+                id="foreach_in_match",
+            ),
         )
 
 
@@ -790,6 +800,8 @@ def test_var_operations(driver, var_operations: AppHarness):
         # rx.memo component with state
         ("memo_comp", "1210"),
         ("memo_comp_nested", "345"),
+        # foreach in a match
+        ("foreach_in_match", "first\nsecond\nthird"),
     ]
 
     for tag, expected in tests:
diff --git a/reflex/.templates/jinja/web/pages/utils.js.jinja2 b/reflex/.templates/jinja/web/pages/utils.js.jinja2
index 8e9808fbb5..4e3546070e 100644
--- a/reflex/.templates/jinja/web/pages/utils.js.jinja2
+++ b/reflex/.templates/jinja/web/pages/utils.js.jinja2
@@ -64,11 +64,11 @@
 {# Args: #}
 {#     component: component dictionary #}
 {% macro render_iterable_tag(component) %}
-{ {%- if component.iterable_type == 'dict' -%}Object.entries({{- component.iterable_state }}){%- else -%}{{- component.iterable_state }}{%- endif -%}.map(({{ component.arg_name }}, {{ component.arg_index }}) => (
+<>{ {%- if component.iterable_type == 'dict' -%}Object.entries({{- component.iterable_state }}){%- else -%}{{- component.iterable_state }}{%- endif -%}.map(({{ component.arg_name }}, {{ component.arg_index }}) => (
   {% for child in component.children %}
   {{ render(child) }}
   {% endfor %}
-))}
+))}</>
 {%- endmacro %}