Hoe render je een component afhankelijk van een…

Meestal worden de volgende benaderingen gebruikt:

Voorwaardelijk renderen met behulp van de ternaire operator of if: De eenvoudigste manier.

// Voorbeeld met ternaire operator in React
function MijnComponent({ isIngelogd }) {
  return (
    <div>
      {isIngelogd ? (
        <p>Hallo, gebruiker!</p>
      ) : (
        <button>Inloggen</button>
      )}
    </div>
  );
}

// Voorbeeld met if binnen een functioneel component
function EenAnderComponent({ isLoading }) {
  if (isLoading) {
    return <p>Bezig met laden...</p>;
  }
  return <h1>Gegevens geladen!</h1>;
}

Logisch AND (&&): Handig wanneer je een component alleen wilt tonen als de voorwaarde waar is.

// Voorbeeld met && in React
function BerichtenTelling({ count }) {
  return (
    <div>
      {count > 0 && <p>U heeft {count} nieuwe berichten.</p>}
    </div>
  );
}

Gebruik van functies en child componenten: Hiermee kun je de renderlogica in aparte functies of componenten onderbrengen voor betere leesbaarheid en hergebruik.

// Voorbeeld met functie in React
function renderContent(userRole) {
  if (userRole === 'admin') {
    return <AdminPaneel />;
  } else if (userRole === 'gebruiker') {
    return <GebruikersProfiel />;
  }
  return <InlogPagina />;
}

function App({ userRole }) {
  return (
    <div>
      {renderContent(userRole)}
    </div>
  );
}

Arrays en map methode: Voor het weergeven van een lijst componenten op basis van gegevens.

// Voorbeeld met map in React
function ItemsLijst({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.naam}</li>
      ))}
    </ul>
  );
}

CSS display / visibility: Verbergt of toont een element, maar het component wordt nog steeds gerenderd. Geschikt voor eenvoudige gevallen waarbij de toestand de DOM-structuur niet beïnvloedt.

/* Voorbeeld CSS */
.verborgen {
  display: none;
}

// Voorbeeld van toepassing van CSS-klasse in React
function TogglebareInhoud({ isVisible }) {
  return (
    <div className={isVisible ? '' : 'verborgen'}>
      <p>Deze inhoud wordt verborgen.</p>
    </div>
  );
}

De keuze van methode hangt af van de complexiteit van de voorwaarde en de structuur van de component. Voor eenvoudige voorwaarden volstaat vaak de ternary operator of &&. Voor meer complexe scenario’s en een betere organisatie van de code wordt aanbevolen om aparte functies of componenten te gebruiken. Gebruik CSS display / visibility voorzichtig als je het element niet volledig uit de DOM wilt verwijderen.

Hoe render je een component afhankelijk van een voorwaarde?