Repository: reflex-dev/reflex

Issue:
Incorrect formatting of warning about component prop formats
**Describe the bug**
Incorrect formatting of warning about component prop formats - see below

**To Reproduce - see the following `main.py`:**\

```
"""Main page."""

from rxconfig import config

import reflex as rx

DOCS_URL = ""
APP_NAME = config.app_name.title()


class State(rx.State):
    """The app state."""


def index() -> rx.Component:
    return rx.container(
        rx.box(
            rx.heading(
                f"Welcome to {APP_NAME}.",
                size=9
                ),
            )
        )


app = rx.App()
app.add_page(index)
```

The error is that the `size` argument for `heading` should be a string (for whatever reason somebody decided to make it that way when all the options are integers but just configured as strings???), but it has been passed as an integer

The error message however is a bit poor as it does not at all make it clear that the wrong type has been passed.

```
...
ValueError: prop value for size of the `Heading` component should be one of the following: '1','2','3','4','5','6','7','8','9'. Got '9' instead
```

**Expected behavior**

Some sort of error message which also relates to types when an int (or not string for that matter) is passed

**Screenshots**
N/A - just run the code

**Specifics (please complete the following information):**
 - Python Version: 3.10.13
 - Reflex Version: 0.4.6
 - OS: Linux (GH Codespaces) - not relevant however
 - Browser (Optional): Firefox - also not relevant


Discussion:
this was something we have seen before. Under the hood this react component and a few others actually takes in a value 1-9 as a string (I know kind of odd). We can switch it to accept a literal 1-9 in the future can cast it to a string internally.
> this was something we have seen before. Under the hood this react component and a few others actually takes in a value 1-9 as a string (I know kind of odd). We can switch it to accept a literal 1-9 in the future can cast it to a string internally.

@Alek99 agreed - but the main issue for now is that the error message doesn't differentiate how an integer was entered but a string is needed, and without intellisense or knowing how to peer into the definition I wouldn't be able to quickly solve that - so others may have this issue and not know how to solve it
Easiest way to fix it is probably to check `isinstance(str)` in the `rx.heading()` code for the `size` argument
> > this was something we have seen before. Under the hood this react component and a few others actually takes in a value 1-9 as a string (I know kind of odd). We can switch it to accept a literal 1-9 in the future can cast it to a string internally.
> 
> @Alek99 agreed - but the main issue for now is that the error message doesn't differentiate how an integer was entered but a string is needed, and without intellisense or knowing how to peer into the definition I wouldn't be able to quickly solve that - so others may have this issue and not know how to solve it Easiest way to fix it is probably to check `isinstance(str)` in the `rx.heading()` code for the `size` argument

Thanks for reporting this. I believe this should indeed be an easy fix. Will put in a PR for that.



Patch:
diff --git a/reflex/utils/types.py b/reflex/utils/types.py
index d6e5b0b9516..8f7bf059a01 100644
--- a/reflex/utils/types.py
+++ b/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"
             )
 
 


Test patch:
diff --git a/tests/utils/test_types.py b/tests/utils/test_types.py
new file mode 100644
index 00000000000..f701f810d68
--- /dev/null
+++ b/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"
+    )