React

Hoe maak je conditional rendering in React?

Conditionally tonen/verbergen van componenten.

Home/Categorieën/React/Hoe maak je conditional rendering in React?

Methoden

if/else statements Ternary operator (inline) Logical && operator

Code Voorbeelden

JAVASCRIPTConditional rendering
function LoginStatus({ isLoggedIn, user }) {
  // Ternary
  return isLoggedIn ? (
    <p>Welkom, {user.name}!</p>
  ) : (
    <p>Log in alstublieft</p>
  );
}

// Logical && (toon alleen als true)
function AdminPanel({ isAdmin }) {
  return isAdmin && <div>Admin controls</div>;
}

Relevante trefwoorden

conditionalternaryrendering
← Terug naar ReactAlle categorieën →