{"record":{"id":"b7151e9b5c0a1705","repo":"reflex-dev/reflex","slug":"expected-a-component-or-callable-got-component-r","errorCode":null,"errorMessage":"Expected a Component or callable, got {component!r} of type {type(component)}","messagePattern":"Expected a Component or callable, got (.+?) of type (.+?)","errorType":"exception","errorClass":"TypeError","httpStatus":null,"severity":"error","filePath":"reflex/compiler/compiler.py","lineNumber":910,"sourceCode":"def into_component(component: Component | ComponentCallable) -> Component:\n    \"\"\"Convert a component to a Component.\n\n    Args:\n        component: The component to convert.\n\n    Returns:\n        The converted component.\n\n    Raises:\n        TypeError: If the component is not a Component.\n\n    # noqa: DAR401\n    \"\"\"\n    if (converted := _into_component_once(component)) is not None:\n        return converted\n    if not callable(component):\n        msg = f\"Expected a Component or callable, got {component!r} of type {type(component)}\"\n        raise TypeError(msg)\n\n    try:\n        component_called = component()\n    except KeyError as e:\n        if isinstance(e, ReflexError):\n            _modify_exception(e)\n            raise\n        key = e.args[0] if e.args else None\n        if key is not None and isinstance(key, Var):\n            raise TypeError(\n                \"Cannot access a primitive map with a Var. Consider calling rx.Var.create() on the map.\"\n            ).with_traceback(e.__traceback__) from None\n        raise\n    except TypeError as e:\n        if isinstance(e, ReflexError):\n            _modify_exception(e)\n            raise\n        message = e.args[0] if e.args else None","sourceCodeStart":892,"sourceCodeEnd":928,"githubUrl":"https://github.com/reflex-dev/reflex/blob/45b8ed5ab735f8a56bbb09a42384f030eb0208e7/reflex/compiler/compiler.py#L892-L928","documentation":"rx.component()-style conversion (into_component) accepts a Component instance, a callable returning a Component, or None-like shortcuts; anything else that isn't callable raises TypeError. The value's repr and type are included to help identify the bad value, typically a string/Var/attribute accessed by mistake.","triggerScenarios":"Passing a non-Component, non-callable value where a component is expected: a plain string, a number, a Var, a dict, or the result of calling something that returned None/non-Component. Common: forgetting to call a component factory (though that yields a Component only when called), or using State.some_var where a component was meant, or referencing an undefined attribute that resolved to a non-callable.","commonSituations":"Refactoring render methods and returning a Var or string instead of rx.text(...); copy-paste from docs where a component was replaced by its string name; passing component props through generic wrappers that lose the type.","solutions":["Wrap the value in an appropriate component (rx.text(value) for strings) or call the factory to produce a Component","Check the repr/type in the message to find where the bad value enters your layout","If the value may be conditionally a component, use rx.cond(...) instead of relying on truthiness","Add type annotations (rx.Component) to render/page functions so mypy/pyright catches it early"],"exampleFix":"# before\ndef index():\n    return State.message  # TypeError: Expected a Component or callable\n# after\ndef index():\n    return rx.text(State.message)","handlingStrategy":"type-guard","validationCode":null,"typeGuard":"from reflex.component import Component\nfrom collections.abc import Callable\n\ndef is_renderable(value) -> bool:\n    return isinstance(value, Component) or callable(value)","tryCatchPattern":"try:\n    child = rx.component(value)\nexcept TypeError as e:\n    if \"Expected a Component or callable\" in str(e):\n        child = rx.text(str(value))\n    else:\n        raise","preventionTips":["Annotate page/render functions with -> rx.Component so type checkers catch bad returns","Wrap raw strings/numbers in rx.text()/rx.heading() before returning","Use rx.cond for conditional rendering rather than returning raw values"],"tags":["reflex","components","type-error","layout"],"backgroundTag":"invalid-component-type","analyzedSha":"45b8ed5ab735f8a56bbb09a42384f030eb0208e7","analyzedAt":"2026-08-28T19:25:27.644Z","schemaVersion":2},"datasetVersion":"2026-08-28T21:17:43.275Z"}