add fragment to foreach (#3877)

Author: adhami3310

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:

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 %}