{"record":{"id":"cfc1cad6ecdec88a","repo":"reflex-dev/reflex","slug":"prop-value-for-key-s-of-the-comp-name-compon","errorCode":null,"errorMessage":"prop value for {key!s} of the `{comp_name}` component should be one of the following: {allowed_value_str}. Got {value_str} instead","messagePattern":"prop value for (.+?) of the `(.+?)` component should be one of the following: (.+?)\\. Got (.+?) instead","errorType":"exception","errorClass":"ValueError","httpStatus":null,"severity":"error","filePath":"packages/reflex-base/src/reflex_base/utils/types.py","lineNumber":1141,"sourceCode":"    Raises:\n        ValueError: When the value is not a valid literal.\n    \"\"\"\n    from reflex_base.vars import Var\n\n    if (\n        is_literal(expected_type)\n        and not isinstance(value, Var)  # validating vars is not supported yet.\n        and not is_encoded_fstring(value)  # f-strings are not supported.\n        and value not in expected_type.__args__\n    ):\n        allowed_values = expected_type.__args__\n        if value not in allowed_values:\n            allowed_value_str = \",\".join([\n                str(v) if not isinstance(v, str) else f\"'{v}'\" for v in allowed_values\n            ])\n            value_str = f\"'{value}'\" if isinstance(value, str) else value\n            msg = f\"prop value for {key!s} of the `{comp_name}` component should be one of the following: {allowed_value_str}. Got {value_str} instead\"\n            raise ValueError(msg)\n\n\ndef safe_issubclass(cls: Any, cls_check: Any | tuple[Any, ...]):\n    \"\"\"Check if a class is a subclass of another class. Returns False if internal error occurs.\n\n    Args:\n        cls: The class to check.\n        cls_check: The class to check against.\n\n    Returns:\n        Whether the class is a subclass of the other class.\n    \"\"\"\n    try:\n        return issubclass(cls, cls_check)\n    except TypeError:\n        return False\n\n","sourceCodeStart":1123,"sourceCodeEnd":1159,"githubUrl":"https://github.com/reflex-dev/reflex/blob/45b8ed5ab735f8a56bbb09a42384f030eb0208e7/packages/reflex-base/src/reflex_base/utils/types.py#L1123-L1159","documentation":"This ValueError is raised by reflex-base's validate_literal when a component prop is annotated with typing.Literal[...] but the value passed is not one of the allowed members. The message lists the permitted values for the given component and prop key, plus the offending value. It exists to catch invalid prop values at Python time instead of silently generating broken JavaScript.","triggerScenarios":"Passing a value outside a Literal-annotated prop's allowed set, e.g. rx.el.img(loading='egar') instead of 'eager'/'lazy', or an integer where the Literal expects a specific string. Any rx component whose prop is Literal-typed and receives a typo'd or wrong-typed value triggers this during rendering/compilation.","commonSituations":"Typos in prop names/values copied from docs; upgrading reflex where a prop's Literal set changed (a previously valid value removed); dynamically computed prop values that return unexpected types (e.g. numpy str instead of str); AI-generated or hand-written component wrappers passing unvalidated kwargs.","solutions":["Check the error message: it lists every allowed value — change the passed value to one of them","If the value comes from a variable, print/assert its runtime value before passing it to the component","If you upgraded reflex, check the changelog for the prop's Literal set changes and migrate the value","If you genuinely need an unlisted value, use the raw HTML escape hatch (rx.el or custom_component) or open an issue/PR to extend the Literal"],"exampleFix":"# before\nrx.el.img(src='/x.png', loading='egar')\n# after\nrx.el.img(src='/x.png', loading='lazy')","handlingStrategy":"validation","validationCode":"from typing import get_args, get_type_hints\nALLOWED = get_args(get_type_hints(rx.el.img)['loading'])\nassert loading in ALLOWED, f'loading must be one of {ALLOWED}'","typeGuard":"def is_valid_literal(value: object, allowed: tuple) -> bool:\n    return value in allowed","tryCatchPattern":null,"preventionTips":["Read the error message — it enumerates every allowed value","Type your wrapper components' props with the same Literal as the underlying component so mypy catches mistakes","Add unit tests asserting prop values for dynamic prop sources"],"tags":["reflex","component-props","literal-validation","valueerror"],"backgroundTag":"invalid-enum-value","analyzedSha":"45b8ed5ab735f8a56bbb09a42384f030eb0208e7","analyzedAt":"2026-08-28T19:25:27.644Z","schemaVersion":2},"datasetVersion":"2026-08-28T21:17:43.275Z"}