Conditional Rendering Solid — SolidJS

Solid menyediakan komponen Show dan Switch/Match untuk conditional rendering. Show import { Show } from "solid-js" function App() { const [loggedIn, setLoggedIn

Solid menyediakan komponen Show dan Switch/Match untuk conditional rendering.

Show

import { Show } from "solid-js"

function App() {
  const [loggedIn, setLoggedIn] = createSignal(false)

  return (
    <Show when={loggedIn()} fallback={<p>Silakan login</p>}>
      <p>Selamat datang!</p>
    </Show>
  )
}

Switch/Match

import { Switch, Match } from "solid-js"

<Switch>
  <Match when={role() === "admin"}>
    <AdminPanel />
  </Match>
  <Match when={role() === "user"}>
    <Dashboard />
  </Match>
</Switch>

Mengapa Show lebih baik dari ternary? Karena Show lazy — children hanya dievaluasi saat when true.

Yang akan kamu pelajari