{"id":51782,"date":"2023-04-13T08:32:55","date_gmt":"2023-04-13T06:32:55","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=51782&#038;post_type=knowledgebase&#038;preview_id=51782"},"modified":"2025-10-01T21:44:34","modified_gmt":"2025-10-01T19:44:34","slug":"react-must-be-in-scope-when-using-jsx","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/react-must-be-in-scope-when-using-jsx\/","title":{"rendered":"Zo los je de fout &#8220;React must be in scope when using JSX&#8221; op (5 methoden)"},"content":{"rendered":"<p>Werken met <a href=\"https:\/\/kinsta.com\/blog\/what-is-react-js\/\">React<\/a> kan soms lastig zijn, vooral bij het dealen met fouten die niet altijd gemakkelijk te begrijpen zijn.<\/p>\n<p>Een veel voorkomende fout die developers kunnen tegenkomen is de &#8220;React must be in scope when using JSX&#8221; fout. Deze fout treedt op wanneer React niet goed ge\u00efmporteerd of ge\u00efnitialiseerd wordt in een component dat JSX syntax gebruikt.<\/p>\n<p>In dit artikel bespreken we de oorzaken van deze fout en geven we oplossingen voor het oplossen ervan.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Wat veroorzaakt de &#8220;React must be in scope when using JSX&#8221; fout?<\/h2>\n<p>JSX (JavaScript XML) is een syntax-extensie waarmee je <a href=\"https:\/\/kinsta.com\/blog\/what-is-html\/\">HTML<\/a>-achtige code kunt schrijven in <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a>. Browsers begrijpen JSX niet, maar voorgeconfigureerde toolkits zoals Create React App bevatten een JSX transformtool die de JSX code omzet in geldige JavaScript code, die ge\u00efnterpreteerd kan worden door browsers.<\/p>\n<p>In React versies van v\u00f3\u00f3r 17.0 werd JSX door de JSX transformer tijdens compileertijd omgezet in <code>React.createElement()<\/code> functiecalls. Hierdoor moest React ge\u00efmporteerd worden om de React elementen te laten werken. Met de introductie van een nieuwe JSX transformer in React v17.0 worden speciale functies uit de nieuwe invoerpunten van het React pakket automatisch ge\u00efmporteerd, waardoor het niet meer nodig is React te importeren in elk bestand dat JSX expliciet gebruikt.<\/p>\n<p>Laten we als voorbeeld eens kijken naar de volgende functionele component:<\/p>\n<pre><code class=\"language-jsx\">function App() {\n  return &lt;h1&gt;Welcome to Kinsta!&lt;\/h1&gt;;\n}<\/code><\/pre>\n<p>Bij het compileren wordt het omgezet in gewone JavaScript:<\/p>\n<pre><code class=\"language-jsx\">function App() {\n  return React.createElement('h1', null, 'Welcome to Kinsta!');\n}<\/code><\/pre>\n<p>Omdat React ongedefinieerd is, gooit dit altijd de fout &#8220;&#8216;React must be in scope when using JSX&#8221;.<\/p>\n\n<h2>2 manieren om de &#8220;React must be in scope when using JSX&#8221; fout op te lossen<\/h2>\n<p>Deze fout kan op een paar manieren opgelost worden, afhankelijk van de versie van React die je gebruikt.<\/p>\n<ul>\n<li>V\u00f3\u00f3r React v17<\/li>\n<li>React v17 en hoger<\/li>\n<\/ul>\n<h3>1. React import declaration opnemen of corrigeren (fix voor React lager dan v17)<\/h3>\n<p>Als je een oudere versie van React gebruikt, kan het zijn dat je een onjuiste import declaration voor &#8216;react&#8217; mist of hebt. Zorg voor de juiste import declaration bovenaan je bestand (met een hoofdletter &#8220;R&#8221; op &#8220;React&#8221;):<\/p>\n<pre><code class=\"language-jsx\">\/\/ Wrong \u274c\nimport react  from 'react';\n\n\/\/ Correct \u2705\nimport React  from 'react';<\/code><\/pre>\n<p>Je functionele component zal er nu zo uitzien als hij wordt omgezet in gewone <a href=\"https:\/\/kinsta.com\/nl\/blog\/fouten-in-javascript\/\">JavaScript<\/a>:<\/p>\n<pre><code class=\"language-jsx\">import React  from 'react';\n\nfunction App() {\n  return React.createElement('h1', null, 'Welcome to Kinsta!');\n}<\/code><\/pre>\n<h3>2. ESLint configuratie bijwerken (Fix voor React v17 en hoger)<\/h3>\n<p>In React v17.0 is een <a href=\"https:\/\/legacy.reactjs.org\/blog\/2020\/09\/22\/introducing-the-new-jsx-transform.html\" target=\"_blank\" rel=\"noopener noreferrer\">nieuwe JSX transformatie<\/a> ge\u00efntroduceerd, die automatisch speciale functies importeert uit de nieuwe invoerpunten van het React pakket, waardoor het niet meer nodig is React te importeren in elk bestand dat JSX expliciet gebruikt.<\/p>\n<p>Neem bijvoorbeeld de volgende functionele component:<\/p>\n<pre><code class=\"language-jsx\">function App() {\n  return &lt;h1&gt;Welcome to Kinsta!&lt;\/h1&gt;;\n}<\/code><\/pre>\n<p>Dit is waar de nieuwe JSX transform het naar compileert:<\/p>\n<pre><code class=\"language-jsx\">\/\/ Inserted by a compiler (don't import it yourself!)\nimport {jsx as _jsx} from 'react\/jsx-runtime';\n\nfunction App() {\n  return _jsx('h1', { children: 'Welcome to Kinsta!' });\n}<\/code><\/pre>\n<p>Dit betekent dat je React niet langer hoeft te importeren in je componenten om JSX te gebruiken. Als je deze fout blijft krijgen, zelfs na het controleren van je <strong>package.json<\/strong> bestand om je React versie te bevestigen, moet je je <a href=\"https:\/\/www.npmjs.com\/package\/eslint-config-react-app\" target=\"_blank\" rel=\"noopener noreferrer\">ESLint configuraties<\/a> bijwerken.<\/p>\n<p>In dit stadium is dit technisch gezien geen React fout meer, maar eerder een ESLint fout.<\/p>\n<p><strong>Opmerking:<\/strong> Je gebruikt vaak linting tools zoals ESLint in je React project omdat het je code controleert om mogelijke fouten op te sporen die je code nu of in de toekomst kunnen breken. Deze tool dwingt je React te importeren als het JSX rond het bestand detecteert.<\/p>\n<p>Als je zeker weet dat je React versie v17.0 of hoger is, dan is het veilig om de regels uit te schakelen die ervoor zorgen dat je React importeert als je JSX gebruikt in je React.<\/p>\n<p>Er zijn twee belangrijke manieren om ESLint configuraties bij te werken. Als je een <strong>.eslintrc.js<\/strong> of <strong>.eslintrc.json<\/strong> bestand hebt. Voeg de volgende regels toe aan je <strong>.eslintrc.js<\/strong> bestand.<\/p>\n<pre><code class=\"language-json\">\"rules\": {\n  \/\/ ...\n  \"react\/react-in-jsx-scope\": \"off\",\n  \"react\/jsx-uses-react\": \"off\",\n }<\/code><\/pre>\n<p>Anders kun je het <code>eslintConfig<\/code> object in je <strong>package.json<\/strong> bestand bijwerken:<\/p>\n<pre><code class=\"language-json\">{\n  \"name\": \"quotes-circle\",\n  \/\/ ...\n  \"dependencies\": {\n    \/\/ ...\n  },\n  \"eslintConfig\": {\n    \"extends\": [\n      \"react-app\",\n      \"react-app\/jest\"\n    ],\n    \"rules\": {\n      \"react\/jsx-uses-react\": \"off\",\n      \"react\/react-in-jsx-scope\": \"off\"\n    }\n  },\n}<\/code><\/pre>\n<p>In bovenstaande code is de regel <a href=\"https:\/\/github.com\/jsx-eslint\/eslint-plugin-react\/blob\/master\/docs\/rules\/react-in-jsx-scope.md\" target=\"_blank\" rel=\"noopener noreferrer\">react-in-jsx-scope<\/a> uitgeschakeld, zodat ESLint geen fouten geeft als je React niet importeert.<\/p>\n<p>Op dit punt zou je de &#8220;React&#8217; must be in scope when using JSX&#8221; fout voor eens en altijd opgelost moeten hebben. Maar het kan zijn dat iets je in de weg zat, en dat de fout er nog steeds is.<\/p>\n<p>Laten we eens kijken naar nog een paar manieren waarop je het kunt proberen op te lossen.<\/p>\n<h2>3 extra manieren om de &#8220;React must be in scope when using jsx&#8221; fout op te lossen<\/h2>\n<p>Stel dat de fout nog steeds aanhoudt. Hier zijn drie extra manieren om de &#8220;React&#8217; must be in scope when using JSX&#8221; fout op te lossen.<\/p>\n<h3>1. Werk de versie van React scripts bij<\/h3>\n<p>Je kunt de versie van de <strong>react-scripts<\/strong> van je project bijwerken door het volgende commando in je terminal uit te voeren:<\/p>\n<pre><code class=\"language-bash\">\/\/ npm\nnpm install react-scripts@latest\n\n\/\/ yarn\nyarn add react-scripts@latest<\/code><\/pre>\n<h3>2. Verwijder de map Node_modules en het bestand package-lock.json<\/h3>\n<p>Als de fout blijft bestaan, dan is het mogelijk dat sommige van je dependencies verkeerd ge\u00efnstalleerd zijn. Je kunt dit oplossen door je <strong>node_modules<\/strong> map en <strong>package-lock.json<\/strong> bestand (niet <strong>package.json<\/strong>) te verwijderen. Voer dan het volgende commando uit om de pakketten opnieuw te installeren:<\/p>\n<pre><code class=\"language-bash\">npm install<\/code><\/pre>\n<p>Start vervolgens je dev-server opnieuw op.<\/p>\n<h3>3. Werk de versies van React en React-Dom bij<\/h3>\n<p>Tot slot, als de fout blijft bestaan, werk dan je versies van <strong>react<\/strong> en <strong>react-dom<\/strong> bij met onderstaande commando&#8217;s:<\/p>\n<pre><code class=\"language-bash\">\/\/ npm\nnpm install react@latest react-dom@latest\n\n\/\/ if you use TypeScript\nnpm install --save-dev @types\/react@latest @types\/react-dom@latest\n\n\/\/ OR\n\n\/\/ Yarn\nyarn add react@latest react-dom@latest\n\n\/\/ if you use TypeScript\nyarn add @types\/react@latest @types\/react-dom@latest --dev<\/code><\/pre>\n<p>Op dit punt is het (vrijwel) zeker dat deze fout is opgelost.<\/p>\n<h2>Samenvatting<\/h2>\n<p>De fout &#8220;React must be in scope when using JSX&#8221; is een veelvoorkomend probleem dat <a href=\"https:\/\/kinsta.com\/nl\/blog\/soorten-developers\/\">developers<\/a> kunnen tegenkomen bij het werken met React. Deze fout treedt vooral op in eerdere versies van React v17 wanneer de JSX syntaxis wordt gebruikt in een bestand, maar de React bibliotheek niet goed ge\u00efmporteerd of opgenomen is. Het komt ook voor in hogere versies van React v17 wanneer ESLint configuraties de fout geven of wanneer sommige dependencies in je <strong>node_modules <\/strong>map verkeerd zijn ge\u00efnstalleerd.<\/p>\n<p>Op basis van de React versie waarmee je werkt, zullen er verschillende manieren zijn die je kunt gebruiken om deze fout op te lossen, die we in het artikel hebben geschetst.<\/p>\n<p><em>Nu is het jouw beurt: Ben je dit probleem ooit tegengekomen? Hoe heb je het opgelost? Zijn er andere benaderingen die je hebt gebruikt die niet in dit artikel zijn behandeld? Laat het ons weten in de comments!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Werken met React kan soms lastig zijn, vooral bij het dealen met fouten die niet altijd gemakkelijk te begrijpen zijn. Een veel voorkomende fout die developers &#8230;<\/p>\n","protected":false},"author":287,"featured_media":51783,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[871,908],"class_list":["post-51782","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-react","topic-react-fouten"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Zo los je de fout &quot;React must be in scope when using JSX&quot; op - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Leer hoe je gemakkelijk de fout &quot; React must be in scope when using JSX&quot; kunt oplossen met een van deze 5 genoemde methoden.\" \/>\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-must-be-in-scope-when-using-jsx\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Zo los je de fout &quot;React must be in scope when using JSX&quot; op (5 methoden)\" \/>\n<meta property=\"og:description\" content=\"Leer hoe je gemakkelijk de fout &quot; React must be in scope when using JSX&quot; kunt oplossen met een van deze 5 genoemde methoden.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/react-must-be-in-scope-when-using-jsx\/\" \/>\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-04-13T06:32:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T19:44:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"6084\" \/>\n\t<meta property=\"og:image:height\" content=\"3042\" \/>\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 je gemakkelijk de fout &quot; React must be in scope when using JSX&quot; kunt oplossen met een van deze 5 genoemde methoden.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/04\/react-must-be-in-scope-when-using-jsx.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=\"6 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-must-be-in-scope-when-using-jsx\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/react-must-be-in-scope-when-using-jsx\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Zo los je de fout &#8220;React must be in scope when using JSX&#8221; op (5 methoden)\",\"datePublished\":\"2023-04-13T06:32:55+00:00\",\"dateModified\":\"2025-10-01T19:44:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/react-must-be-in-scope-when-using-jsx\/\"},\"wordCount\":1051,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/react-must-be-in-scope-when-using-jsx\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg\",\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/react-must-be-in-scope-when-using-jsx\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/react-must-be-in-scope-when-using-jsx\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/react-must-be-in-scope-when-using-jsx\/\",\"name\":\"Zo los je de fout \\\"React must be in scope when using JSX\\\" op - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/react-must-be-in-scope-when-using-jsx\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/react-must-be-in-scope-when-using-jsx\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg\",\"datePublished\":\"2023-04-13T06:32:55+00:00\",\"dateModified\":\"2025-10-01T19:44:34+00:00\",\"description\":\"Leer hoe je gemakkelijk de fout \\\" React must be in scope when using JSX\\\" kunt oplossen met een van deze 5 genoemde methoden.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/react-must-be-in-scope-when-using-jsx\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/react-must-be-in-scope-when-using-jsx\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/react-must-be-in-scope-when-using-jsx\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg\",\"width\":6084,\"height\":3042,\"caption\":\"Zo los je de fout \\\"React must be in scope when using JSX\\\" op\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/react-must-be-in-scope-when-using-jsx\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React fouten\",\"item\":\"https:\/\/kinsta.com\/nl\/onderwerpen\/react-fouten\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Zo los je de fout &#8220;React must be in scope when using JSX&#8221; op (5 methoden)\"}]},{\"@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":"Zo los je de fout \"React must be in scope when using JSX\" op - Kinsta\u00ae","description":"Leer hoe je gemakkelijk de fout \" React must be in scope when using JSX\" kunt oplossen met een van deze 5 genoemde methoden.","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-must-be-in-scope-when-using-jsx\/","og_locale":"nl_NL","og_type":"article","og_title":"Zo los je de fout \"React must be in scope when using JSX\" op (5 methoden)","og_description":"Leer hoe je gemakkelijk de fout \" React must be in scope when using JSX\" kunt oplossen met een van deze 5 genoemde methoden.","og_url":"https:\/\/kinsta.com\/nl\/blog\/react-must-be-in-scope-when-using-jsx\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2023-04-13T06:32:55+00:00","article_modified_time":"2025-10-01T19:44:34+00:00","og_image":[{"width":6084,"height":3042,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Leer hoe je gemakkelijk de fout \" React must be in scope when using JSX\" kunt oplossen met een van deze 5 genoemde methoden.","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Joel Olawanle","Geschatte leestijd":"6 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/react-must-be-in-scope-when-using-jsx\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/react-must-be-in-scope-when-using-jsx\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Zo los je de fout &#8220;React must be in scope when using JSX&#8221; op (5 methoden)","datePublished":"2023-04-13T06:32:55+00:00","dateModified":"2025-10-01T19:44:34+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/react-must-be-in-scope-when-using-jsx\/"},"wordCount":1051,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/react-must-be-in-scope-when-using-jsx\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg","inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/nl\/blog\/react-must-be-in-scope-when-using-jsx\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/react-must-be-in-scope-when-using-jsx\/","url":"https:\/\/kinsta.com\/nl\/blog\/react-must-be-in-scope-when-using-jsx\/","name":"Zo los je de fout \"React must be in scope when using JSX\" op - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/react-must-be-in-scope-when-using-jsx\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/react-must-be-in-scope-when-using-jsx\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg","datePublished":"2023-04-13T06:32:55+00:00","dateModified":"2025-10-01T19:44:34+00:00","description":"Leer hoe je gemakkelijk de fout \" React must be in scope when using JSX\" kunt oplossen met een van deze 5 genoemde methoden.","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/react-must-be-in-scope-when-using-jsx\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/react-must-be-in-scope-when-using-jsx\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/react-must-be-in-scope-when-using-jsx\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg","width":6084,"height":3042,"caption":"Zo los je de fout \"React must be in scope when using JSX\" op"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/react-must-be-in-scope-when-using-jsx\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/nl\/"},{"@type":"ListItem","position":2,"name":"React fouten","item":"https:\/\/kinsta.com\/nl\/onderwerpen\/react-fouten\/"},{"@type":"ListItem","position":3,"name":"Zo los je de fout &#8220;React must be in scope when using JSX&#8221; op (5 methoden)"}]},{"@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\/51782","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=51782"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/51782\/revisions"}],"predecessor-version":[{"id":52163,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/51782\/revisions\/52163"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/51782\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/51782\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/51782\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/51782\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/51782\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/51782\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/51782\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/51782\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/51782\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/51782\/translations\/dk"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/51782\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/51783"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=51782"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=51782"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=51782"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}