Conditional rendering is een krachtige feature van React waarmee developeres componenten kunnen renderen op basis van bepaalde voorwaarden.

Het is een fundamenteel concept dat een cruciale rol speelt bij het bouwen van dynamische en interactieve webapplicaties.

In deze uitgebreide gids duiken we diep in conditional rendering in React, waarbij we basis- en geavanceerde technieken behandelen, inclusief voorbeelden zodat je een beter idee ervan krijgt.

De basis van conditional rendering in React

Met conditional rendering in React kunnen developers dynamisch bepalen welke inhoud op het scherm wordt weergegeven op basis van specifieke waarden die kunnen worden opgeslagen in een variabele, status of props.

Dit kan buitengewoon nuttig zijn in scenario’s waarin je bepaalde UIelementen wilt tonen of verbergen, de layout van een pagina wilt veranderen, of verschillende inhoud wilt weergeven op basis van gebruikersinteracties.

Conditional rendering is belangrijk in React applicaties omdat je daarmee dynamische en interactieve gebruikersinterfaces kunt maken die in real time kunnen reageren op veranderende gegevens en gebruikersinteracties.

Het helpt de prestaties en efficiëntie van je toepassingen te verbeteren door onnodige rendering van componenten of elementen die niet nodig zijn, te vermijden.

Basistechnieken voor conditional rendering

Er zijn verschillende basistechnieken die je kunt gebruiken voor conditional rendering in React. Laten we ze elk in detail verkennen.

Het if statement gebruiken voor conditional rendering

Een van de meest eenvoudige manieren om conditional rendering in React te implementeren is door het traditionele if statement te gebruiken.

if (condition) {
    return <p>Expression 1</p>;
  } else {
    return <p>Expression 2</p>;
  }

Het JavaScript’s if statement kan worden gebruikt binnen de render() methode van je component om inhoud voorwaardelijk te renderen op basis van een bepaalde voorwaarde.

Je kunt het if statement bijvoorbeeld gebruiken om een load spinner weer te geven terwijl je wacht op het laden van gegevens:

import { useState, useEffect } from 'react';
import Spinner from './Spinner';

const MyComponent = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [data, setData] = useState(null);

  useEffect(() => {
    // Fetch data from an API
    fetch('https://example.com/data')
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setIsLoading(false);
      });
  }, []);

  if (isLoading) {
    return <Spinner />;
  }

  return <div>{/* Render the data here */}</div>;
};

export default MyComponent;

In dit voorbeeld haalt MyComponent gegevens op uit een API met behulp van de useEffect hook. Tijdens het wachten op het laden van de gegevens tonen we een Spinner component met behulp van het if statement.

Een ander voorbeeld kan het renderen van een fallback UI zijn als er een fout optreedt tijdens het renderen van je component:

const MyComponent = ({ data }) => {
  if (!data) {
    return <p>Something went wrong. Please try again later.</p>;
  }

  return <div>{/* Render the data here */}</div>;
};

export default MyComponent;

In deze code hebben we een MyComponent die een data prop neemt. Als de data prop false is, renderen we een foutmelding met het if statement.

Tenslotte kun je verschillende content weergeven voor verschillende gebruikersrollen met het if statement:

const MyComponent = ({ user }) => {
  if (user.role === 'admin') {
    return <p>Welcome, admin!</p>;
  } else if (user.role === 'user') {
    return <p>Welcome, user!</p>;
  } else {
    return <p>You are not authorized to access this page.</p>;
  }
};

export default MyComponent;

In deze code hebben we een MyComponent die een user prop aanneemt. Afhankelijk van de property user.role geven we verschillende content weer met het if statement.

De ternary operator gebruiken voor conditionele weergave

Een andere beknopte manier om conditional weergave in React te implementeren is door de ternary operator (?) in JSX te gebruiken.

Met de ternary operator kun je een compact inline if-else statement schrijven door 3 operands op te geven. De eerste operand is de voorwaarde, terwijl de andere twee operand de expressies zijn. Als de voorwaarde true is, wordt de eerste expressie uitgevoerd; anders de tweede.

Je kunt bijvoorbeeld verschillende componenten weergeven op basis van een prop:

import ComponentA from './ComponentA';
import ComponentB from './ComponentB';

const ExampleComponent = ({ shouldRenderComponentA }) => {
  return (
    <div>
      {shouldRenderComponentA ? <ComponentA /> : <ComponentB />}
    </div>
  );
};

export default ExampleComponent;

In deze code hebben we een ExampleComponent die een prop neemt genaamd shouldRenderComponentA. We gebruiken de ternary operator om voorwaardelijk ComponentA of ComponentB weer te geven op basis van de prop waarde.

Je kunt ook verschillende tekst weergeven op basis van een state:

import { useState } from 'react';

const ExampleComponent = () => {
  const [showMessage, setShowMessage] = useState(false);

  return (
    <div>
      <button onClick={() => setShowMessage(!showMessage)}>
        {showMessage ? 'Hide message' : 'Show message'}
      </button>
      {showMessage ? <p>Hello, world!</p> : null}
    </div>
  );
};

export default ExampleComponent;

In dit voorbeeld gebruiken we de ternary operator om afhankelijk van de waarde van de state showMessage voorwaardelijk verschillende tekst weer te geven. Als op de knop wordt geklikt, wordt de waarde van showMessage omgeschakeld, en wordt de tekst dienovereenkomstig weergegeven of verborgen.

Tenslotte kun je een load spinner weergeven terwijl gegevens worden opgehaald:

import { useState, useEffect } from 'react';
import Spinner from './Spinner';

const ExampleComponent = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
      const jsonData = await response.json();
      setData(jsonData);
      setIsLoading(false);
    };
    fetchData();
  }, []);

  return (
    <div>
      {isLoading ? <Spinner /> : <p>{data.title}</p>}
    </div>
  );
};

export default ExampleComponent;

In dit voorbeeld gebruiken we de ternary operator om voorwaardelijk een load spinner weer te geven terwijl gegevens worden opgehaald uit een API. Zodra de gegevens beschikbaar zijn, geven we de eigenschap title weer met behulp van de ternary operator.

Logische AND en OR operatoren gebruiken voor conditionele weergave

Je kunt ook de logische AND (&&) en OR (||) operatoren gebruiken om conditional rendering in React te implementeren.

Met de logische AND operator kun je een component alleen renderen als een bepaalde voorwaarde waar is, terwijl je met de logische OR operator een component kunt renderen als een van de voorwaarden waar is.

Deze operators zijn handig als je eenvoudige voorwaarden hebt die bepalen of een component moet worden gerenderd of niet. Als je bijvoorbeeld een knop alleen wilt weergeven als een formulier geldig is, kun je de logische EN operator als volgt gebruiken:

import { useState } from 'react';

const FormComponent = () => {
  const [formValues, setFormValues] = useState({ username: "", password: "" });

  const isFormValid = formValues.username && formValues.password;

  const handleSubmit = (event) => {
    event.preventDefault();
    // Submit form data
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={formValues.username}
        placeholder="Type Username..."
        onChange={(e) =>
          setFormValues({ ...formValues, username: e.target.value })
        }
      />
      <br />
      <input
        type="password"
        value={formValues.password}
        placeholder="Type Password..."
        onChange={(e) =>
          setFormValues({ ...formValues, password: e.target.value })
        }
      />
      {isFormValid && <button type="submit">Submit</button>}
    </form>
  );
};

export default FormComponent;

In dit voorbeeld hebben we een FormComponent dat een formulier heeft met twee invoervelden voor username en password. We gebruiken useState haak om de formulierwaarden te beheren en isFormValid variabele om te controleren of beide invoervelden waarden hebben. Met behulp van de logische AND operator (&&) geven we de verzendknop alleen weer als isFormValid waar is. Dit zorgt ervoor dat de knop alleen wordt ingeschakeld als het formulier geldig is.

Op dezelfde manier kun je de OR operator gebruiken om een laadbericht weer te geven als er nog gegevens worden geladen, of een foutmelding als er een fout optreedt:

import React, { useEffect, useState } from 'react';

const DataComponent = () => {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [errorMessage, setErrorMessage] = useState('');

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        setData(data);
      } catch (error) {
        setErrorMessage('An error occurred while fetching data.');
      } finally {
        setIsLoading(false);
      }
    };

    fetchData();
  }, []);

  return (
    <>
      {errorMessage || isLoading ? (
        <p>{errorMessage || 'Loading...'}</p>
      ) : (
        <ul>
          {data.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      )}
    </>
  );
};

export default DataComponent;

In dit voorbeeld haalt een DataComponent gegevens op uit een API met behulp van fetch en geeft die weer in een lijst. We gebruiken de hook useState om de gegevens, de load state en de foutmelding te beheren. Met behulp van de logische OR operator (||) kunnen we een laadbericht of een foutmelding weergeven als een van de voorwaarden waar is. Dit zorgt ervoor dat de gebruiker een bericht ziet dat de huidige status van het proces van gegevens ophalen aangeeft.

Het gebruik van de logische AND en OR operatoren voor conditional weergave in React is een beknopte en leesbare manier om eenvoudige voorwaarden af te handelen. Het is echter beter om andere benaderingen te gebruiken zoals switch statements voor complexere logica.

Geavanceerde technieken voor conditional rendering

Conditional rendering in React kan complexer zijn, afhankelijk van de eisen van je applicatie. Hier zijn enkele geavanceerde technieken die je kunt gebruiken voor conditional rendering in complexere scenario’s.

Switch statements gebruiken voor conditional weergave

Hoewel if statements en ternary operators gangbare benaderingen zijn voor conditionele weergave, kan soms een switch statement geschikter zijn, vooral als je te maken hebt met meerdere voorwaarden.

Hier is een voorbeeld:

import React from 'react';
const MyComponent = ({ userType }) => {
  switch (userType) {
    case 'admin':
      return <p>Welcome, admin user!</p>;
    case 'user':
      return <p>Welcome, regular user!</p>;
    default:
      return <p>Please log in to continue.</p>;
  }
};
export default MyComponent;

In deze code wordt een switch statement gebruikt om inhoud op basis van de userType prop voorwaardelijk te renderen. Deze aanpak kan nuttig zijn bij het omgaan met meerdere voorwaarden en biedt een meer georganiseerde en leesbare manier om complexe logica te hanteren.

Voorwaardelijk renderen met React Router

React Router is een populaire bibliotheek voor het afhandelen van routing aan de clientzijde in React applicaties. Met React Router kun je componenten op basis van de huidige route voorwaardelijk renderen.

Hier is een voorbeeld van het implementeren van conditional rendering met React Router:

import { useState } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Home from './components/Home';
import Login from './components/Login';
import Dashboard from './components/Dashboard';
import NotFound from './components/NotFound';

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

  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/login">
          <Login setIsLoggedIn={setIsLoggedIn} />
        </Route>
        {isLoggedIn ? (
          <Route path="/dashboard" component={Dashboard} />
        ) : (
          <Route component={NotFound} />
        )}
      </Switch>
    </Router>
  );
};

export default App;

In deze code gebruiken we de isLoggedIn state om conditioneel ofwel de Dashboard component te renderen als de gebruiker is ingelogd, ofwel de NotFound component als de gebruiker niet is ingelogd. De Login component zet de isLoggedIn state op true zodra de gebruiker met succes inlogt.

Merk op dat we de children prop van de <Route> component gebruiken om de Login component en de setIsLoggedIn functie door te geven. Hierdoor kunnen we props doorgeven aan de Login component zonder deze te specificeren in de path prop.

Samenvatting

Conditional rendering is een krachtige techniek in React waarmee je de UI dynamisch kunt bijwerken op basis van verschillende condities.

Afhankelijk van de complexiteit van de UI logica van je applicatie, kun je de aanpak kiezen die het beste bij je behoeften past.

Vergeet niet je code strak, georganiseerd en leesbaar te houden, en test de logica van je conditional rendering altijd grondig om er zeker van te zijn dat het werkt zoals verwacht in verschillende scenario’s.

Op zoek naar de ideale hostingoplossing voor je React applicaties? Probeer Kinsta’s Applicatie Hosting gratis uit!

Joel Olawanle Kinsta

Joel is een Frontend developer die bij Kinsta werkt als Technical Editor. Hij is een gepassioneerd leraar met liefde voor open source en heeft meer dan 200 technische artikelen geschreven, voornamelijk over JavaScript en zijn frameworks.