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 behandeld: 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 elementen worden weergegeven op basis van specifieke condities.

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

Deze techniek wordt vaak toegepast wanneer een element alleen getoond moet worden als een bepaalde conditie waar is.

Voorbeeld

Beschouw een voorbeeld waarin studenten die geslaagd zijn voor een examen worden geïnformeerd. Als de score van een student hoger is dan 60 punten, wordt een succesbericht weergegeven 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.

Volledige app-code

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

Voorwaardelijke weergave met de Ternary-operator

Syntax

Conditioneel renderen met behulp van de ternaire operator (? ... : ...) is een krachtige techniek. Hiermee kan op een beknopte manier elementen worden weergegeven 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

Beschouw een situatie waarin gebruikers verschillend begroet worden afhankelijk van hun aanmeldstatus. De Greeting-component toont conditioneel renderen met de ternaire 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.

Volledige app-code