State

Conditional rendering

A function interpolation can return a template, a string, or null. Returning null removes the content; returning a template inserts it.

# Toggle pattern

${() => (show.value ? html`<p>Visible</p>` : null)}

When show changes, Elur re-runs the function. If it now returns null, the <p> is removed. If it returns a template, the <p> is inserted.

# Your task

The starter code always shows the message. Make it appear only when show is true.

  1. Replace the static <p> with a function interpolation.
  2. Return html\

    Peek-a-boo!

    `whenshow.value` is true.
  3. Return null otherwise.
💡 Tip

You can also return different templates: ${() => (status.value === "ok" ? html\

Done

` : html`

Loading…

`)}`.

Need a hint?
Replace the static <p> with ${() => show.value ? html`<p>Peek-a-boo!</p>` : null}