{"id":52767,"date":"2023-05-26T12:07:33","date_gmt":"2023-05-26T10:07:33","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=52767&preview=true&preview_id=52767"},"modified":"2023-05-27T16:13:55","modified_gmt":"2023-05-27T14:13:55","slug":"react-conditional-render","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/react-conditional-render\/","title":{"rendered":"React conditional rendering onder de knie krijgen: Een diepgaande gids"},"content":{"rendered":"

Conditional rendering is een krachtige feature van React waarmee developeres componenten kunnen renderen op basis van bepaalde voorwaarden.<\/p>\n

Het is een fundamenteel concept dat een cruciale rol speelt bij het bouwen van dynamische en interactieve webapplicaties.<\/p>\n

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.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

De basis van conditional rendering in React<\/h2>\n

Met conditional rendering in React<\/a> 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.<\/p>\n

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.<\/p>\n

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.<\/p>\n

Het helpt de prestaties<\/a> en effici\u00ebntie van je toepassingen te verbeteren door onnodige rendering van componenten of elementen die niet nodig zijn, te vermijden.<\/p>\n\n

Basistechnieken voor conditional rendering<\/h2>\n

Er zijn verschillende basistechnieken die je kunt gebruiken voor conditional rendering in React. Laten we ze elk in detail verkennen.<\/p>\n

Het if statement gebruiken voor conditional rendering<\/h3>\n

Een van de meest eenvoudige manieren om conditional rendering in React te implementeren is door het traditionele if<\/code> statement te gebruiken.<\/p>\n

if (condition) {\n    return <p>Expression 1<\/p>;\n  } else {\n    return <p>Expression 2<\/p>;\n  }<\/code><\/pre>\n
Het JavaScript’s if<\/code> statement kan worden gebruikt binnen de render()<\/code> methode van je component om inhoud voorwaardelijk te renderen op basis van een bepaalde voorwaarde.<\/p>\n
Je kunt het if statement bijvoorbeeld gebruiken om een load spinner weer te geven terwijl je wacht op het laden van gegevens:<\/p>\n
import { useState, useEffect } from 'react';\nimport Spinner from '.\/Spinner';\n\nconst MyComponent = () => {\n  const [isLoading, setIsLoading] = useState(true);\n  const [data, setData] = useState(null);\n\n  useEffect(() => {\n    \/\/ Fetch data from an API\n    fetch('https:\/\/example.com\/data')\n      .then((response) => response.json())\n      .then((data) => {\n        setData(data);\n        setIsLoading(false);\n      });\n  }, []);\n\n  if (isLoading) {\n    return <Spinner \/>;\n  }\n\n  return <div>{\/* Render the data here *\/}<\/div>;\n};\n\nexport default MyComponent;<\/code><\/pre>\n
In dit voorbeeld haalt MyComponent<\/code> gegevens op uit een API met behulp van de useEffect<\/code> hook. Tijdens het wachten op het laden van de gegevens tonen we een Spinner component met behulp van het if<\/code> statement.<\/p>\n
Een ander voorbeeld kan het renderen van een fallback UI zijn als er een fout optreedt tijdens het renderen van je component:<\/p>\n
const MyComponent = ({ data }) => {\n  if (!data) {\n    return <p>Something went wrong. Please try again later.<\/p>;\n  }\n\n  return <div>{\/* Render the data here *\/}<\/div>;\n};\n\nexport default MyComponent;<\/code><\/pre>\n
In deze code hebben we een MyComponent<\/code> die een data<\/code> prop neemt. Als de data<\/code> prop false is, renderen we een foutmelding met het if<\/code> statement.<\/p>\n
Tenslotte kun je verschillende content weergeven voor verschillende gebruikersrollen met het if<\/code> statement:<\/p>\n
const MyComponent = ({ user }) => {\n  if (user.role === 'admin') {\n    return <p>Welcome, admin!<\/p>;\n  } else if (user.role === 'user') {\n    return <p>Welcome, user!<\/p>;\n  } else {\n    return <p>You are not authorized to access this page.<\/p>;\n  }\n};\n\nexport default MyComponent;<\/code><\/pre>\n
In deze code hebben we een MyComponent<\/code> die een user<\/code> prop aanneemt. Afhankelijk van de property user.role<\/code> geven we verschillende content weer met het if<\/code> statement.<\/p>\n
De ternary operator gebruiken voor conditionele weergave<\/h3>\n
Een andere beknopte manier om conditional weergave in React te implementeren is door de ternary operator (?) in JSX te gebruiken.<\/p>\n
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<\/code> is, wordt de eerste expressie uitgevoerd; anders de tweede.<\/p>\n
Je kunt bijvoorbeeld verschillende componenten weergeven op basis van een prop:<\/p>\n
import ComponentA from '.\/ComponentA';\nimport ComponentB from '.\/ComponentB';\n\nconst ExampleComponent = ({ shouldRenderComponentA }) => {\n  return (\n    <div>\n      {shouldRenderComponentA ? <ComponentA \/> : <ComponentB \/>}\n    <\/div>\n  );\n};\n\nexport default ExampleComponent;<\/code><\/pre>\n
In deze code hebben we een ExampleComponent<\/code> die een prop neemt genaamd shouldRenderComponentA<\/code>. We gebruiken de ternary operator om voorwaardelijk ComponentA<\/code> of ComponentB<\/code> weer te geven op basis van de prop waarde.<\/p>\n
Je kunt ook verschillende tekst weergeven op basis van een state:<\/p>\n
import { useState } from 'react';\n\nconst ExampleComponent = () => {\n  const [showMessage, setShowMessage] = useState(false);\n\n  return (\n    <div>\n      <button onClick={() => setShowMessage(!showMessage)}>\n        {showMessage ? 'Hide message' : 'Show message'}\n      <\/button>\n      {showMessage ? <p>Hello, world!<\/p> : null}\n    <\/div>\n  );\n};\n\nexport default ExampleComponent;<\/code><\/pre>\n
In dit voorbeeld gebruiken we de ternary operator om afhankelijk van de waarde van de state showMessage<\/code> voorwaardelijk verschillende tekst weer te geven. Als op de knop wordt geklikt, wordt de waarde van showMessage<\/code> omgeschakeld, en wordt de tekst dienovereenkomstig weergegeven of verborgen.<\/p>\n
Tenslotte kun je een load spinner weergeven terwijl gegevens worden opgehaald:<\/p>\n
import { useState, useEffect } from 'react';\nimport Spinner from '.\/Spinner';\n\nconst ExampleComponent = () => {\n  const [isLoading, setIsLoading] = useState(true);\n  const [data, setData] = useState(null);\n\n  useEffect(() => {\n    const fetchData = async () => {\n      const response = await fetch('https:\/\/jsonplaceholder.typicode.com\/todos\/1');\n      const jsonData = await response.json();\n      setData(jsonData);\n      setIsLoading(false);\n    };\n    fetchData();\n  }, []);\n\n  return (\n    <div>\n      {isLoading ? <Spinner \/> : <p>{data.title}<\/p>}\n    <\/div>\n  );\n};\n\nexport default ExampleComponent;<\/code><\/pre>\n
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<\/code> weer met behulp van de ternary operator.<\/p>\n
Logische AND en OR operatoren gebruiken voor conditionele weergave<\/h3>\n
Je kunt ook de logische AND (&&<\/code>) en OR (||<\/code>) operatoren gebruiken om conditional rendering in React te implementeren.<\/p>\n
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.<\/p>\n
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:<\/p>\n
import { useState } from 'react';\n\nconst FormComponent = () => {\n  const [formValues, setFormValues] = useState({ username: \"\", password: \"\" });\n\n  const isFormValid = formValues.username && formValues.password;\n\n  const handleSubmit = (event) => {\n    event.preventDefault();\n    \/\/ Submit form data\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <input\n        type=\"text\"\n        value={formValues.username}\n        placeholder=\"Type Username...\"\n        onChange={(e) =>\n          setFormValues({ ...formValues, username: e.target.value })\n        }\n      \/>\n      <br \/>\n      <input\n        type=\"password\"\n        value={formValues.password}\n        placeholder=\"Type Password...\"\n        onChange={(e) =>\n          setFormValues({ ...formValues, password: e.target.value })\n        }\n      \/>\n      {isFormValid && <button type=\"submit\">Submit<\/button>}\n    <\/form>\n  );\n};\n\nexport default FormComponent;<\/code><\/pre>\n
In dit voorbeeld hebben we een FormComponent<\/code> dat een formulier heeft met twee invoervelden voor username<\/code> en password<\/code>. We gebruiken useState<\/code> haak om de formulierwaarden te beheren en isFormValid<\/code> variabele om te controleren of beide invoervelden waarden hebben. Met behulp van de logische AND operator (&&) geven we de verzendknop alleen weer als isFormValid<\/code> waar is. Dit zorgt ervoor dat de knop alleen wordt ingeschakeld als het formulier geldig is.<\/p>\n
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:<\/p>\n
import React, { useEffect, useState } from 'react';\n\nconst DataComponent = () => {\n  const [data, setData] = useState(null);\n  const [isLoading, setIsLoading] = useState(true);\n  const [errorMessage, setErrorMessage] = useState('');\n\n  useEffect(() => {\n    const fetchData = async () => {\n      try {\n        const response = await fetch('https:\/\/api.example.com\/data');\n        const data = await response.json();\n        setData(data);\n      } catch (error) {\n        setErrorMessage('An error occurred while fetching data.');\n      } finally {\n        setIsLoading(false);\n      }\n    };\n\n    fetchData();\n  }, []);\n\n  return (\n    <>\n      {errorMessage || isLoading ? (\n        <p>{errorMessage || 'Loading...'}<\/p>\n      ) : (\n        <ul>\n          {data.map((item) => (\n            <li key={item.id}>{item.name}<\/li>\n          ))}\n        <\/ul>\n      )}\n    <\/>\n  );\n};\n\nexport default DataComponent;<\/code><\/pre>\n
In dit voorbeeld haalt een DataComponent<\/code> gegevens op uit een API met behulp van fetch en geeft die weer in een lijst. We gebruiken de hook useState<\/code> 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.<\/p>\n
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<\/code> statements voor complexere logica.<\/p>\n
Geavanceerde technieken voor conditional rendering<\/h2>\n
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.<\/p>\n
Switch statements gebruiken voor conditional weergave<\/h3>\n
Hoewel if statements en ternary operators gangbare benaderingen zijn voor conditionele weergave, kan soms een switch<\/code> statement geschikter zijn, vooral als je te maken hebt met meerdere voorwaarden.<\/p>\n
Hier is een voorbeeld:<\/p>\n
import React from 'react';\nconst MyComponent = ({ userType }) => {\n  switch (userType) {\n    case 'admin':\n      return <p>Welcome, admin user!<\/p>;\n    case 'user':\n      return <p>Welcome, regular user!<\/p>;\n    default:\n      return <p>Please log in to continue.<\/p>;\n  }\n};\nexport default MyComponent;<\/code><\/pre>\n
In deze code wordt een switch<\/code> statement gebruikt om inhoud op basis van de userType<\/code> 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.<\/p>\n
Voorwaardelijk renderen met React Router<\/h3>\n
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.<\/p>\n
Hier is een voorbeeld van het implementeren van conditional rendering met React Router:<\/p>\n
import { useState } from 'react';\nimport { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\n\nimport Home from '.\/components\/Home';\nimport Login from '.\/components\/Login';\nimport Dashboard from '.\/components\/Dashboard';\nimport NotFound from '.\/components\/NotFound';\n\nconst App = () => {\n  const [isLoggedIn, setIsLoggedIn] = useState(false);\n\n  return (\n    <Router>\n      <Switch>\n        <Route exact path=\"\/\" component={Home} \/>\n        <Route path=\"\/login\">\n          <Login setIsLoggedIn={setIsLoggedIn} \/>\n        <\/Route>\n        {isLoggedIn ? (\n          <Route path=\"\/dashboard\" component={Dashboard} \/>\n        ) : (\n          <Route component={NotFound} \/>\n        )}\n      <\/Switch>\n    <\/Router>\n  );\n};\n\nexport default App;<\/code><\/pre>\n
In deze code gebruiken we de isLoggedIn<\/code> state om conditioneel ofwel de Dashboard<\/code> component te renderen als de gebruiker is ingelogd, ofwel de NotFound<\/code> component als de gebruiker niet is ingelogd. De Login<\/code> component zet de isLoggedIn<\/code> state op true<\/code> zodra de gebruiker met succes inlogt.<\/p>\n
Merk op dat we de children prop van de <Route><\/code> component gebruiken om de Login<\/code> component en de setIsLoggedIn<\/code> functie door te geven. Hierdoor kunnen we props doorgeven aan de Login<\/code> component zonder deze te specificeren in de path<\/code> prop.<\/p>\n\n
Samenvatting<\/h2>\n
Conditional rendering is een krachtige techniek in React waarmee je de UI dynamisch kunt bijwerken op basis van verschillende condities.<\/p>\n
Afhankelijk van de complexiteit van de UI logica van je applicatie, kun je de aanpak kiezen die het beste bij je behoeften past.<\/p>\n
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.<\/p>\n
Op zoek naar de ideale hostingoplossing voor je React applicaties? Probeer Kinsta’s Applicatie Hosting<\/a> gratis uit!<\/p>\n","protected":false},"excerpt":{"rendered":"
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 …<\/p>\n","protected":false},"author":287,"featured_media":52768,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[871],"class_list":["post-52767","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-react"],"yoast_head":"\nReact conditional rendering onder de knie krijgen: Een diepgaande gids - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Leer hoe conditional rendering werkt in React en til je vaardigheden op het gebied van webontwikkeling naar een hoger niveau met onze uitgebreide gids.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/nl\/blog\/react-conditional-render\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React conditional rendering onder de knie krijgen: Een diepgaande gids\" \/>\n<meta property=\"og:description\" content=\"Leer hoe conditional rendering werkt in React en til je vaardigheden op het gebied van webontwikkeling naar een hoger niveau met onze uitgebreide gids.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/react-conditional-render\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-26T10:07:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-27T14:13:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/05\/react-conditional-render-3.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Leer hoe conditional rendering werkt in React en til je vaardigheden op het gebied van webontwikkeling naar een hoger niveau met onze uitgebreide gids.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/05\/react-conditional-render-3.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/react-conditional-render\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/react-conditional-render\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"React conditional rendering onder de knie krijgen: Een diepgaande gids\",\"datePublished\":\"2023-05-26T10:07:33+00:00\",\"dateModified\":\"2023-05-27T14:13:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/react-conditional-render\/\"},\"wordCount\":1316,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/react-conditional-render\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/05\/react-conditional-render-3.jpg\",\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/react-conditional-render\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/react-conditional-render\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/react-conditional-render\/\",\"name\":\"React conditional rendering onder de knie krijgen: Een diepgaande gids - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/react-conditional-render\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/react-conditional-render\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/05\/react-conditional-render-3.jpg\",\"datePublished\":\"2023-05-26T10:07:33+00:00\",\"dateModified\":\"2023-05-27T14:13:55+00:00\",\"description\":\"Leer hoe conditional rendering werkt in React en til je vaardigheden op het gebied van webontwikkeling naar een hoger niveau met onze uitgebreide gids.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/react-conditional-render\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/react-conditional-render\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/react-conditional-render\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/05\/react-conditional-render-3.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/05\/react-conditional-render-3.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/react-conditional-render\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\",\"item\":\"https:\/\/kinsta.com\/nl\/onderwerpen\/react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"React conditional rendering onder de knie krijgen: Een diepgaande gids\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/nl\/#website\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snelle, veilige, premium hostingoplossingen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\",\"https:\/\/x.com\/Kinsta_NL\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"React conditional rendering onder de knie krijgen: Een diepgaande gids - Kinsta\u00ae","description":"Leer hoe conditional rendering werkt in React en til je vaardigheden op het gebied van webontwikkeling naar een hoger niveau met onze uitgebreide gids.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/nl\/blog\/react-conditional-render\/","og_locale":"nl_NL","og_type":"article","og_title":"React conditional rendering onder de knie krijgen: Een diepgaande gids","og_description":"Leer hoe conditional rendering werkt in React en til je vaardigheden op het gebied van webontwikkeling naar een hoger niveau met onze uitgebreide gids.","og_url":"https:\/\/kinsta.com\/nl\/blog\/react-conditional-render\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2023-05-26T10:07:33+00:00","article_modified_time":"2023-05-27T14:13:55+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/05\/react-conditional-render-3.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Leer hoe conditional rendering werkt in React en til je vaardigheden op het gebied van webontwikkeling naar een hoger niveau met onze uitgebreide gids.","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/05\/react-conditional-render-3.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Joel Olawanle","Geschatte leestijd":"9 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/react-conditional-render\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/react-conditional-render\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"React conditional rendering onder de knie krijgen: Een diepgaande gids","datePublished":"2023-05-26T10:07:33+00:00","dateModified":"2023-05-27T14:13:55+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/react-conditional-render\/"},"wordCount":1316,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/react-conditional-render\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/05\/react-conditional-render-3.jpg","inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/nl\/blog\/react-conditional-render\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/react-conditional-render\/","url":"https:\/\/kinsta.com\/nl\/blog\/react-conditional-render\/","name":"React conditional rendering onder de knie krijgen: Een diepgaande gids - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/react-conditional-render\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/react-conditional-render\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/05\/react-conditional-render-3.jpg","datePublished":"2023-05-26T10:07:33+00:00","dateModified":"2023-05-27T14:13:55+00:00","description":"Leer hoe conditional rendering werkt in React en til je vaardigheden op het gebied van webontwikkeling naar een hoger niveau met onze uitgebreide gids.","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/react-conditional-render\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/react-conditional-render\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/react-conditional-render\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/05\/react-conditional-render-3.jpg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/05\/react-conditional-render-3.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/react-conditional-render\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/nl\/"},{"@type":"ListItem","position":2,"name":"React","item":"https:\/\/kinsta.com\/nl\/onderwerpen\/react\/"},{"@type":"ListItem","position":3,"name":"React conditional rendering onder de knie krijgen: Een diepgaande gids"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/nl\/#website","url":"https:\/\/kinsta.com\/nl\/","name":"Kinsta\u00ae","description":"Snelle, veilige, premium hostingoplossingen","publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/nl\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","https:\/\/x.com\/Kinsta_NL","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/nl\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/52767","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/comments?post=52767"}],"version-history":[{"count":4,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/52767\/revisions"}],"predecessor-version":[{"id":52788,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/52767\/revisions\/52788"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/52767\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/52767\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/52767\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/52767\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/52767\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/52767\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/52767\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/52767\/translations\/es"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/52767\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/52768"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=52767"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=52767"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=52767"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}