Skip to content

Conditional Rendering with Run Fails When Returning Components #8

@erwinheldy

Description

@erwinheldy

For example:

import { Run, useSignal } from 'solid-react';

export default function App() {
  const [count, setCount] = useSignal(0);
  const inc = () => setCount((count) => count + 1);
  const dec = () => setCount((count) => count - 1);

  return (
    <>
      <button onClick={dec}>-</button>
      {count()}
      <button onClick={inc}>+</button>

      <hr />
      {/* This works */}
      {Run(() => (count() > 10 ? 'High' : 'Low'))}

      <hr />
      {/* This works */}
      {Run(() => (count() > 10 ? <High /> : 'Low'))}

      <hr />
      {/* This doesn't work */}
      {Run(() => (count() > 10 ? <High /> : <Low />))}
    </>
  );
}

function High() {
  return <h1>High</h1>;
}

function Low() {
  return <h1>Low</h1>;
}

Demo: https://stackblitz.com/edit/vitejs-vite-nzvjm9ji?file=src%2FApp.tsx

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions