Literal Error Formatting (#3037)

reflex/utils/types.py

@@ -416,11 +416,12 @@ def validate_literal(key: str, value: Any, expected_type: Type, comp_name: str):
     ):
         allowed_values = expected_type.__args__
         if value not in allowed_values:
-            value_str = ",".join(
+            allowed_value_str = ",".join(
                 [str(v) if not isinstance(v, str) else f"'{v}'" for v in allowed_values]
             )
+            value_str = f"'{value}'" if isinstance(value, str) else value
             raise ValueError(
-                f"prop value for {str(key)} of the `{comp_name}` component should be one of the following: {value_str}. Got '{value}' instead"
+                f"prop value for {str(key)} of the `{comp_name}` component should be one of the following: {allowed_value_str}. Got {value_str} instead"
             )
 
 

tests/utils/test_types.py

@@ -0,0 +1,23 @@
+from typing import Literal
+
+import pytest
+
+from reflex.utils import types
+
+
+@pytest.mark.parametrize(
+    "params, allowed_value_str, value_str",
+    [
+        (["size", 1, Literal["1", "2", "3"], "Heading"], "'1','2','3'", "1"),
+        (["size", "1", Literal[1, 2, 3], "Heading"], "1,2,3", "'1'"),
+    ],
+)
+def test_validate_literal_error_msg(params, allowed_value_str, value_str):
+
+    with pytest.raises(ValueError) as err:
+        types.validate_literal(*params)
+
+    assert (
+        err.value.args[0] == f"prop value for {str(params[0])} of the `{params[-1]}` "
+        f"component should be one of the following: {allowed_value_str}. Got {value_str} instead"
+    )