Components

<Show>

The Show control flow is used to conditionally 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 the child function will be an accessor containing the item.

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

Props

Name	Type	Description
`when`	`T \| undefined \| null \| false`	The value to test for truthiness
`keyed`	`boolean`	Whether to key the block to the value of when
`fallback`	`JSX.Element`	The fallback to render when `when` is falsy

Report an issue with this page