Repository: reflex-dev/reflex

Issue:
[REF-2876] rx.cond as a prop throws a TypeError in 0.5.1a1
**Describe the bug**

```
TypeError: Invalid var passed for prop SelectRoot.default_value, expected type <class 'str'>, got value isTrue(((state__app_state__exposures_state.date_col_candidates.length) > (0))) ? state__app_state__exposures_state.date_col_candidates.at(0) : `` of type <class 'reflex.vars.ComputedVar'>.
make: *** [start-ui] Error 1
```

**To Reproduce**

```python
import reflex as rx


class State(rx.State):
    """The app state."""
    lval: list[str] = ["a", "b"]

    @rx.var
    def clval(self) -> list[str]:
        return self.lval


def index() -> rx.Component:
    return rx.container(
        rx.color_mode.button(position="top-right"),
        rx.vstack(
            rx.select(
                State.clval,
                default_value=rx.cond(
                    State.clval.length() > 0,
                    State.clval[0],
                    ""
                ),
            ),
        ),
        rx.logo(),
    )


app = rx.App()
app.add_page(index)
```

**Expected behavior**
It works like 0.5.0

**Specifics (please complete the following information):**

* Python Version: 3.11
* Reflex Version: 0.5.1a1
* OS:
* Browser (Optional):

**Additional context**
Likely introduced by [https://github.com/reflex-dev/reflex/pull/3254](https://github.com/reflex-dev/reflex/pull/3254)

<sub>From [SyncLinear.com](https://synclinear.com) | [REF-2876](https://linear.app/reflex-dev/issue/REF-2876/rxcond-as-a-prop-throws-a-typeerror-in-051a1)</sub>


Discussion:
@benedikt-bartscher if you know how to fix this one, that would be awesome. I haven't stepped through the code yet, but reverting #3254 makes the issue go away.
@masenf seems like a bug in `rx.cond`. Consider this example, which also fails on reflex < 0.5.1a1:

```python
import reflex as rx


class State(rx.State):
    """The app state."""

    lval: list[str] = ["a", "b"]

    @rx.var
    def clval(self) -> list[str]:
        return self.lval


def index() -> rx.Component:
    return rx.container(
        rx.vstack(
            rx.select(
                State.clval,
                default_value=rx.cond(State.clval.length() > 0, State.clval, ""),
            ),
        ),
    )


app = rx.App()
app.add_page(index)
```



Patch:
diff --git a/reflex/components/core/cond.py b/reflex/components/core/cond.py
index 9ace92b98be..fcc12bc51cc 100644
--- a/reflex/components/core/cond.py
+++ b/reflex/components/core/cond.py
@@ -1,7 +1,8 @@
 """Create a list of components from an iterable."""
+
 from __future__ import annotations
 
-from typing import Any, Dict, Optional, overload
+from typing import Any, Dict, Optional, Union, overload
 
 from reflex.components.base.fragment import Fragment
 from reflex.components.component import BaseComponent, Component, MemoizationLeaf
@@ -10,7 +11,7 @@
 from reflex.constants.colors import Color
 from reflex.style import LIGHT_COLOR_MODE, color_mode
 from reflex.utils import format, imports
-from reflex.vars import BaseVar, Var, VarData
+from reflex.vars import Var, VarData
 
 _IS_TRUE_IMPORT = {
     f"/{Dirs.STATE_PATH}": [imports.ImportVar(tag="isTrue")],
@@ -171,6 +172,11 @@ def create_var(cond_part):
     c2 = create_var(c2)
     var_datas.extend([c1._var_data, c2._var_data])
 
+    c1_type = c1._var_type if isinstance(c1, Var) else type(c1)
+    c2_type = c2._var_type if isinstance(c2, Var) else type(c2)
+
+    var_type = c1_type if c1_type == c2_type else Union[c1_type, c2_type]
+
     # Create the conditional var.
     return cond_var._replace(
         _var_name=format.format_cond(
@@ -179,7 +185,7 @@ def create_var(cond_part):
             false_value=c2,
             is_prop=True,
         ),
-        _var_type=c1._var_type if isinstance(c1, BaseVar) else type(c1),
+        _var_type=var_type,
         _var_is_local=False,
         _var_full_name_needs_state_prefix=False,
         merge_var_data=VarData.merge(*var_datas),


Test patch:
diff --git a/tests/components/core/test_cond.py b/tests/components/core/test_cond.py
index a7604fb9ae1..4bfa902af1b 100644
--- a/tests/components/core/test_cond.py
+++ b/tests/components/core/test_cond.py
@@ -1,13 +1,14 @@
 import json
-from typing import Any
+from typing import Any, Union
 
 import pytest
 
 from reflex.components.base.fragment import Fragment
 from reflex.components.core.cond import Cond, cond
 from reflex.components.radix.themes.typography.text import Text
-from reflex.state import BaseState
-from reflex.vars import Var
+from reflex.state import BaseState, State
+from reflex.utils.format import format_state_name
+from reflex.vars import BaseVar, Var, computed_var
 
 
 @pytest.fixture
@@ -118,3 +119,29 @@ def test_cond_no_else():
     # Props do not support the use of cond without else
     with pytest.raises(ValueError):
         cond(True, "hello")  # type: ignore
+
+
+def test_cond_computed_var():
+    """Test if cond works with computed vars."""
+
+    class CondStateComputed(State):
+        @computed_var
+        def computed_int(self) -> int:
+            return 0
+
+        @computed_var
+        def computed_str(self) -> str:
+            return "a string"
+
+    comp = cond(True, CondStateComputed.computed_int, CondStateComputed.computed_str)
+
+    # TODO: shouln't this be a ComputedVar?
+    assert isinstance(comp, BaseVar)
+
+    state_name = format_state_name(CondStateComputed.get_full_name())
+    assert (
+        str(comp)
+        == f"{{isTrue(true) ? {state_name}.computed_int : {state_name}.computed_str}}"
+    )
+
+    assert comp._var_type == Union[int, str]