Conditional rendering i Astro

Hvad er conditional rendering?

Conditional rendering betyder, at du viser eller skjuler dele af HTML baseret på en betingelse.

I slides bruges bl.a. et badge (New) som eksempel på noget, der kun skal vises i nogle tilfælde.

<article>
  <h2>...</h2>
  <img />
</article>

<p class="badge">New</p>

Vis med &&-operator

Det klassiske mønster er at kombinere en boolsk værdi med &&.

---
const visible = true;
---

<article>
  <h2>...</h2>
  {visible && <p class="badge">New</p>}
  <img />
</article>

Hvis visible er true, renderes badge-elementet. Hvis den er false, renderes intet.

Styr visning med props

I praksis kommer betingelsen ofte fra props.

---
const { newBadge } = Astro.props;
---

<article>
  <h2>...</h2>
  {newBadge && <p class="badge">New</p>}
  <img />
</article>

Og fra parent-komponenten:

<CategoryCard newBadge={true} ... />
<CategoryCard ... />

Samme mønster kan bruges til fx titler:

---
const { title } = Astro.props;
---

<article>
  {title && <h2>{title}</h2>}
  <img />
</article>

Ternary med fallback

Hvis du vil vise noget andet når betingelsen er falsk, brug ternary:

---
const { soldout } = Astro.props;
---

<article>
  {soldout ? <p>Udsolgt</p> : <Button />}
  <img />
</article>

Det er typisk bedre end to adskilte &&-udtryk, når du præcis har to mutuelt eksklusive tilstande.

Bonus: Dynamiske klasser

Næste skridt i decket er dynamiske klasser, som bygger videre på samme idé:

---
const { isActive } = Astro.props;
---

<div class={isActive && "active"}>
  ...
</div>

Her bruges betingelsen ikke til at vise/skjule markup, men til at slå en klasse til eller fra.