Conditional rendering

Show renders its children while when is true, and its fallback otherwise:

<Show when={temp() < 0} fallback={<p>No frost tonight.</p>}>
  <p class="warning">Frost warning!</p>
</Show>

When the condition flips, Solid creates the new branch and removes the old one, including any state inside it. A ternary works for small inline values; Show makes the branch a clear unit.

For more than two cases, Switch renders the first Match whose when is true, or its own fallback:

<Switch fallback={<p>Cold</p>}>
  <Match when={temp() > 25}>
    <p>Hot</p>
  </Match>
  <Match when={temp() > 10}>
    <p>Mild</p>
  </Match>
</Switch>

Order matters: the first match wins.

Try it: replace the two nested ternaries with a Show and a Switch, then drag the slider through every case.