Show & For in SolidJS

From the SolidJS cheat sheet ยท Control Flow ยท verified Jul 2026

Show & For

Conditionally render with Show and efficiently iterate lists with For.

tsx
// Quick Reference
import { Show, For } from "solid-js";

<Show when={loggedIn()} fallback={<Login />}>
  <Dashboard />
</Show>

<For each={items()}>{(item) => <li>{item.name}</li>}</For>
๐Ÿ’ก Show renders children when the "when" prop is truthy, fallback otherwise
โšก For is keyed by reference โ€” each item maintains its own DOM nodes across updates
๐Ÿ“Œ In For, the item is a plain value but the index is a signal โ€” call index() to read it
๐ŸŸข Use For for arrays of objects, Index for arrays of primitives
showforconditionallist

Continue with SolidJS

Save the full cheat sheet or work through every related task.

More SolidJS tasks

Back to the full SolidJS cheat sheet