Conditional Rendering

Wat zijn Conditionals?

Soms wil je bepaalde content alleen tonen als aan een voorwaarde is voldaan. Bijvoorbeeld:

• Toon "Welkom terug!" als de gebruiker is ingelogd
• Toon een "Login" button als de gebruiker NIET is ingelogd
• Toon een error bericht als er iets mis gaat

Methode 1: Ternary Operator (? :)

Gebruik de ternary operator wanneer je twee verschillende dingen wilt tonen:

import { useState } from 'react';

const WelcomeMessage = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <div>
      {isLoggedIn ? <h1>Welkom terug!</h1> : <h1>Log eerst in</h1>}
      
      <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
        {isLoggedIn ? "Uitloggen" : "Inloggen"}
      </button>
    </div>
  );
};

export default WelcomeMessage;

Meer Voorbeelden

// Toon verschillende tekst
{age >= 18 ? <p>Volwassen</p> : <p>Minderjarig</p>}

// Toon verschillende classes
<div className={isActive ? "active" : "inactive"}>
  Content
</div>

// Toon verschillend component
{hasData ? <DataList /> : <EmptyState />}

Methode 2: Logical AND (&&)

Gebruik && wanneer je iets alleen wilt tonen als voorwaarde waar is:

import { useState } from 'react';

const ErrorMessage = () => {
  const [error, setError] = useState('');

  return (
    <div>
      <button onClick={() => setError('Er ging iets mis!')}>
        Trigger Error
      </button>
      
      {error && <p style={{ color: 'red' }}>{error}</p>}
    </div>
  );
};

Meer Voorbeelden

// Toon element alleen als voorwaarde waar is
{isLoggedIn && <p>Welkom terug!</p>}

// Toon loading indicator
{isLoading && <p>Loading...</p>}

// Toon lijst alleen als er items zijn
{items.length > 0 && <ul>{items.map(...)}</ul>}

// Fout: Als count 0 is, toont het "0"!
{count && <p>Count: {count}</p>}

// Goed: Gebruik vergelijking
{count > 0 && <p>Count: {count}</p>}

Praktische Voorbeelden

Loading State

const Users = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [users, setUsers] = useState([]);

  return (
    <div>
      {isLoading ? (
        <p>Loading users...</p>
      ) : (
        <ul>
          {users.map(user => <li key={user.id}>{user.name}</li>)}
        </ul>
      )}
    </div>
  );
};

Error + Success

const Form = () => {
  const [error, setError] = useState('');
  const [success, setSuccess] = useState(false);

  return (
    <div>
      {error && <p style={{ color: 'red' }}>{error}</p>}
      {success && <p style={{ color: 'green' }}>Opgeslagen!</p>}
      
      <button>Submit</button>
    </div>
  );
};

Geneste Conditionals

const Dashboard = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [isAdmin, setIsAdmin] = useState(false);

  return (
    <div>
      {isLoggedIn ? (
        isAdmin ? (
          <AdminPanel />
        ) : (
          <UserPanel />
        )
      ) : (
        <LoginForm />
      )}
    </div>
  );
};

Lege Lijst Afhandelen

const TodoList = () => {
  const [todos, setTodos] = useState([]);

  return (
    <div>
      {todos.length > 0 ? (
        <ul>
          {todos.map(todo => <li key={todo.id}>{todo.text}</li>)}
        </ul>
      ) : (
        <p>Geen todos gevonden. Voeg er een toe!</p>
      )}
    </div>
  );
};

Tips & Regels

• Ternary voor if/else: Gebruik ? : als je twee opties hebt
• AND voor if: Gebruik && als je iets alleen wilt tonen
• Pas op met 0: 0 && <div> toont "0" op je scherm!
• Leesbaarheid: Bij complexe conditionals, gebruik variabelen

Complex vs Simpel

{user && user.isLoggedIn && user.hasAccess && user.role === 'admin' && <AdminPanel />}

const canViewAdmin = user && user.isLoggedIn && 
                     user.hasAccess && user.role === 'admin';

return (
  <div>
    {canViewAdmin && <AdminPanel />}
  </div>
);