Components

<Show>

Edit this page

The Show control flow is used to conditional render part of the view: it renders children when the when is truthy, a fallback otherwise. It is similar to the ternary operator (when ? children : fallback) but is ideal for templating JSX.

import { Show } from "solid-js"
import type { JSX } from "solid-js"
function Show<T>(props: {
when: T | undefined | null | false
keyed?: boolean
fallback?: JSX.Element
children: JSX.Element | ((item: T | Accessor<T>) => JSX.Element)
}): () => JSX.Element

Here's an example of using the Show control flow:

<Show when={state.count > 0} fallback={<div>Loading...</div>}>
<div>My Content</div>
</Show>

Show can also be used as a way of keying blocks to a specific data model. For example the function is re-executed whenever the user model is replaced.

<Show when={state.user} fallback={<div>Loading...</div>} keyed>
{(user) => <div>{user.firstName}</div>}
</Show>

If the keyed property is not used, the argument of a child function will be an accessor containing the item.

<Show when={state.user} fallback={<div>Loading...</div>}>
{(user) => <div>{user().firstName}</div>}
</Show>

Props

NameTypeDescription
whenT | undefined | null | falseThe value to test for truthiness
keyedbooleanWhether to key the block to the value of when
fallbackJSX.ElementThe fallback to render when when is falsy
Report an issue with this page