Voorwaardelijke weergave maakt het mogelijk om elementen dynamisch te tonen of te verbergen op basis van bepaalde condities, wat de flexibiliteit van React-componenten vergroot. In deze sectie worden twee standaardtechnieken voor voorwaardelijke weergave besproken: de &&-operator en de ternary-operator.

Voorwaardelijke weergave met de &&-operator

Syntax

De &&-operator in React wordt gebruikt voor voorwaardelijke weergave en werkt vergelijkbaar met een if-statement in JavaScript. Hiermee kunnen we elementen weergeven op basis van specifieke condities.

condition && (<p>element</p>)

Deze techniek wordt vaak toegepast wanneer we een element alleen willen tonen als een bepaalde conditie waar is.

Voorbeeld

Laten we een voorbeeld nemen waarin we studenten willen informeren die geslaagd zijn voor een examen. Als de score van een student hoger is dan 60 punten, tonen we een succesbericht met hun naam en score.

const Notification = (props) =>
  props.mark > 60 && (
    <p>
      {props.name} has passed the test with {props.mark} points.
    </p>
  );

De Notification-component rendert voorwaardelijk een paragraaf <p>-element op basis van de waarde van de mark prop.

De score van Emily wordt niet getoond omdat deze lager is dan 60pts.

Voorwaardelijk renderen met de Ternary-operator

Syntaxis

Conditioneel renderen met behulp van de ternary-operator (? ... : ...) is een andere krachtige techniek. Het biedt een beknopte manier om elementen te renderen op basis van voorwaarden.

condition ? (true_element) : (false_element)

Deze aanpak is geschikt wanneer er gekozen moet worden tussen twee verschillende elementen op basis van een voorwaarde.

Voorbeeld

Stel je een situatie voor waarin we gebruikers verschillend willen begroeten op basis van hun aanmeldstatus. De Greeting-component demonstreert conditioneel renderen met de ternary-operator.

const Greeting = (props) =>
  props.loggedIn ? (
    <p>Welcome to the home page, {props.name}.</p>
  ) : (
    <p>Hello {props.name}, could you please log in.</p>
  );

In dit voorbeeld begroet de Greeting-component gebruikers verschillend op basis van de waarde van de loggedIn-prop.