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.

function Show<T>(props: {
when: T | undefined | null | false
keyed: boolean
fallback?: JSX.Element
children: JSX.Element | ((item: 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 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>}


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