<Show>

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>

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>

Props