Fix: Correct Var Rendering in JSX Templates and Restore Multi-Argument EventHandler Support

reflex/compiler/templates.py

@@ -10,7 +10,7 @@
 from reflex.constants import Hooks
 from reflex.constants.state import CAMEL_CASE_MEMO_MARKER
 from reflex.utils.format import format_state_name, json_dumps
-from reflex.vars.base import VarData
+from reflex.vars.base import Var, VarData
 
 if TYPE_CHECKING:
     from reflex.compiler.utils import _ImportDict
@@ -52,9 +52,16 @@ def _sort_hooks(
 
 class _RenderUtils:
     @staticmethod
-    def render(component: Mapping[str, Any] | str) -> str:
+    def render(component: Mapping[str, Any] | str | Var | Any) -> str:
+
+        # If component is a Var, render it as raw JS and stop.
+
+        if isinstance(component, Var):
+            return str(component)
+
         if isinstance(component, str):
             return component or "null"
+
         if "iterable" in component:
             return _RenderUtils.render_iterable_tag(component)
         if "match_cases" in component:

tests/units/vars/test_var_render.py

@@ -0,0 +1,7 @@
+from reflex.compiler.templates import _RenderUtils
+from reflex.vars.base import Var
+
+
+def test_var_render_raw_js():
+    v = Var("_event?.formData")
+    assert _RenderUtils.render(v) == "_event?.formData"