{"id":49996,"date":"2023-04-13T07:32:29","date_gmt":"2023-04-13T06:32:29","guid":{"rendered":"https:\/\/kinsta.com\/dk\/?p=49996&#038;post_type=knowledgebase&#038;preview_id=49996"},"modified":"2025-10-01T20:03:02","modified_gmt":"2025-10-01T19:03:02","slug":"react-must-be-in-scope-when-using-jsx","status":"publish","type":"post","link":"https:\/\/kinsta.com\/dk\/blog\/react-must-be-in-scope-when-using-jsx\/","title":{"rendered":"S\u00e5dan l\u00f8ser du fejlen &#8220;React must be in scope when using JSX&#8221; (5 metoder)"},"content":{"rendered":"<p>Det kan nogle gange v\u00e6re sv\u00e6rt at arbejde med <a href=\"https:\/\/kinsta.com\/blog\/what-is-react-js\/\">React<\/a>, is\u00e6r n\u00e5r der er tale om fejl, som ikke altid er lette at forst\u00e5.<\/p>\n<p>En almindelig fejl, som udviklere kan st\u00f8de p\u00e5, er fejlen &#8220;React must be in scope when using JSX&#8221;. Denne fejl opst\u00e5r, n\u00e5r React ikke er korrekt importeret eller initialiseret i en komponent, der bruger JSX-syntaks.<\/p>\n<p>I denne artikel vil vi diskutere \u00e5rsagerne til denne fejl og give l\u00f8sninger p\u00e5, hvordan du l\u00f8ser den.<\/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>Hvad er \u00e5rsagen til fejlen &#8220;react must be in scope when using jsx&#8221;?<\/h2>\n<p>JSX (JavaScript XML) er en syntaksudvidelse, der g\u00f8r det muligt at skrive <a href=\"https:\/\/kinsta.com\/blog\/what-is-html\/\">HTML-lignende<\/a> kode i <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a>. Browsere forst\u00e5r ikke JSX, men forudkonfigurerede v\u00e6rkt\u00f8jss\u00e6t som Create React App indeholder et JSX-transformationsv\u00e6rkt\u00f8j under motorhjelmen, der konverterer JSX-koden til gyldig JavaScript-kode, som kan fortolkes af browsere.<\/p>\n<p>I React-versioner f\u00f8r 17.0 blev JSX transformeret til <code>React.createElement()<\/code> -funktionskald af JSX-transformeren p\u00e5 kompileringstidspunktet. Dette kr\u00e6vede import af React for at f\u00e5 React-elementerne til at fungere. Med indf\u00f8relsen af en ny JSX-transform i React v17.0 importeres s\u00e6rlige funktioner fra React-pakkens nye indgangspunkter automatisk, hvilket eliminerer behovet for at importere React i hver fil, der eksplicit bruger JSX.<\/p>\n<p>Lad os som eksempel tage et kig p\u00e5 f\u00f8lgende funktionelle komponent:<\/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>P\u00e5 kompileringstidspunktet omdannes den til almindelig JavaScript:<\/p>\n<pre><code class=\"language-jsx\">function App() {\n  return React.createElement('h1', null, 'Welcome to Kinsta!');\n}<\/code><\/pre>\n<p>Da React er udefineret, vil dette altid give fejlen &#8220;&#8216;React must be in scope when using jsx&#8221;.<\/p>\n\n<h2>2 m\u00e5der at rette fejlen &#8220;react must be in scope when using jsx&#8221; p\u00e5<\/h2>\n<p>Denne fejl kan rettes p\u00e5 et par m\u00e5der, afh\u00e6ngigt af hvilken version af React du bruger.<\/p>\n<ul>\n<li>F\u00f8r React v17<\/li>\n<li>React v17 og h\u00f8jere<\/li>\n<\/ul>\n<h3>1. Medtag eller korriger React-importdeklaration (rettelse for f\u00f8r React v17)<\/h3>\n<p>Hvis du bruger en \u00e6ldre version af React, mangler du muligvis en importdeklaration for &#8220;react&#8221; eller har en forkert importdeklaration. S\u00f8rg for, at du har den korrekte importdeklaration \u00f8verst i din fil (med et stort &#8220;R&#8221; p\u00e5 &#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>Din funktionelle komponent vil nu se s\u00e5dan ud, n\u00e5r den omdannes til almindelig <a href=\"https:\/\/kinsta.com\/blog\/errors-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. Opdatering af ESLint-konfiguration (rettelse til React v17 og h\u00f8jere)<\/h3>\n<p>I React v17.0 blev der indf\u00f8rt en <a href=\"https:\/\/legacy.reactjs.org\/blog\/2020\/09\/22\/introducing-the-new-jsx-transform.html\" target=\"_blank\" rel=\"noopener noreferrer\">ny JSX-transformation<\/a>, som automatisk importerer s\u00e6rlige funktioner fra React-pakkens nye indgangspunkter, hvilket fjerner behovet for at importere React i hver fil, der eksplicit bruger JSX.<\/p>\n<p>Tag f.eks. f\u00f8lgende funktionelle komponent:<\/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>Dette er, hvad den nye JSX-transformation kompilerer den til:<\/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>Det betyder, at du ikke l\u00e6ngere beh\u00f8ver at importere React i dine komponenter for at bruge JSX. Hvis du bliver ved med at f\u00e5 denne fejl, selv efter at du har kontrolleret din <strong>package.json-fil<\/strong> for at bekr\u00e6fte din React-version, skal du opdatere dine <a href=\"https:\/\/www.npmjs.com\/package\/eslint-config-react-app\" target=\"_blank\" rel=\"noopener noreferrer\">ESLint-konfigurationer<\/a>.<\/p>\n<p>P\u00e5 dette tidspunkt er dette teknisk set ikke l\u00e6ngere en React-fejl, men snarere en ESLint-fejl.<\/p>\n<p><strong>Bem\u00e6rk:<\/strong> Du bruger ofte linting-v\u00e6rkt\u00f8jer som ESLint i dit React-projekt, fordi det kontrollerer din kode for at opdage potentielle fejl, der kan \u00f8del\u00e6gge din kode enten nu eller i fremtiden. Dette v\u00e6rkt\u00f8j tvinger dig til at importere React, n\u00e5r det registrerer JSX rundt omkring i filen.<\/p>\n<p>N\u00e5r du er sikker p\u00e5, at din React-version er v17.0 eller h\u00f8jere, er det sikkert at deaktivere de regler, der sikrer, at du importerer React, n\u00e5r du bruger JSX i din React.<\/p>\n<p>Der er to hovedmetoder til at opdatere ESLint-konfigurationer. Hvis du har en <strong>.eslintrc.js<\/strong> eller <strong>.eslintrc.json-fil<\/strong>. Tilf\u00f8j f\u00f8lgende regler til din <strong>.eslintrc.js-fil<\/strong>.<\/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>Ellers kan du opdatere <code>eslintConfig<\/code> -objektet i din <strong>package.json-fil<\/strong>:<\/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>I ovenst\u00e5ende kode er <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-reglen<\/a> sl\u00e5et fra, s\u00e5 ESLint ikke kaster fejl, n\u00e5r du ikke importerer React.<\/p>\n<p>P\u00e5 dette tidspunkt burde du have rettet fejlen &#8220;react&#8217; must be in scope when using jsx&#8221; \u00e9n gang for alle. Men det kan v\u00e6re, at der er kommet noget i vejen for dig, og at fejlen stadig er der.<\/p>\n<p>Lad os tage et kig p\u00e5 et par flere m\u00e5der, hvorp\u00e5 du kan fors\u00f8ge at l\u00f8se den.<\/p>\n<h2>Yderligere 3 m\u00e5der at rette fejlen &#8220;react must be in scope when using jsx&#8221; Error<\/h2>\n<p>Antag, at fejlen stadig best\u00e5r. Her er tre yderligere m\u00e5der at rette fejlen &#8220;react&#8217; must be in scope when using jsx&#8221; p\u00e5.<\/p>\n<h3>1. Opdater versionen af React-skripts<\/h3>\n<p>Du kan opdatere versionen af dit projekts <strong>react-scripts<\/strong> ved at k\u00f8re f\u00f8lgende kommando i din terminal:<\/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. Slet Node_modules-mappen og filen package-lock.json<\/h3>\n<p>hvis fejlen forts\u00e6tter, er det muligt, at nogle af dine afh\u00e6ngigheder er forkert installeret. Du kan l\u00f8se dette ved at slette din mappe <strong>node_modules<\/strong> og filen <strong>package-lock.json<\/strong> (ikke <strong>package.json<\/strong>). K\u00f8r derefter f\u00f8lgende kommando for at installere pakkerne p\u00e5 ny:<\/p>\n<pre><code class=\"language-bash\">npm install<\/code><\/pre>\n<p>Genstart derefter din dev-server.<\/p>\n<h3>3. Opdater versionerne af React og React-Dom<\/h3>\n<p>Hvis fejlen forts\u00e6tter, skal du endelig opdatere dine versioner af <strong>react<\/strong> og <strong>react-dom<\/strong> ved hj\u00e6lp af nedenst\u00e5ende kommandoer:<\/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>P\u00e5 dette tidspunkt er det sikkert, at fejlen vil blive rettet.<\/p>\n<h2>Opsummering<\/h2>\n<p>Fejlen &#8220;React must be in scope when using JSX&#8221; er et almindeligt problem, som <a href=\"https:\/\/kinsta.com\/dk\/blog\/typer-udviklere\/\">udviklere<\/a> kan st\u00f8de p\u00e5, n\u00e5r de arbejder med React. Denne fejl opst\u00e5r hovedsageligt i tidligere versioner af React v17, n\u00e5r JSX-syntaksen bruges i en fil, men React-biblioteket ikke er korrekt importeret eller inkluderet. Den forekommer ogs\u00e5 i h\u00f8jere versioner af React v17, n\u00e5r ESLint-konfigurationer kaster fejlen, eller n\u00e5r nogle afh\u00e6ngigheder i din <strong>node_modules-mapper<\/strong> forkert installeret.<\/p>\n<p>Baseret p\u00e5 den React-version, du arbejder med, vil der v\u00e6re forskellige m\u00e5der, du kan bruge til at rette denne fejl, som vi skitserede i artiklen.<\/p>\n<p><em>Nu er det din tur: Er du nogensinde st\u00f8dt p\u00e5 dette problem? Hvordan har du l\u00f8st det? Er der andre metoder, du har brugt, som ikke er d\u00e6kket i denne artikel? Lad os vide det i kommentarerne!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Det kan nogle gange v\u00e6re sv\u00e6rt at arbejde med React, is\u00e6r n\u00e5r der er tale om fejl, som ikke altid er lette at forst\u00e5. En almindelig &#8230;<\/p>\n","protected":false},"author":287,"featured_media":49997,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[730,731],"class_list":["post-49996","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-react","topic-react-fejl"],"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>S\u00e5dan rettes fejlen &quot;React must be in scope when using JSX&quot; - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"L\u00e6r, hvordan du nemt kan rette fejlen &quot;React must be in scope when using JSX&quot; ved at bruge en af disse 5 anf\u00f8rte metoder.\" \/>\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\/dk\/blog\/react-must-be-in-scope-when-using-jsx\/\" \/>\n<meta property=\"og:locale\" content=\"da_DK\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"S\u00e5dan l\u00f8ser du fejlen &quot;React must be in scope when using JSX&quot; (5 metoder)\" \/>\n<meta property=\"og:description\" content=\"L\u00e6r, hvordan du nemt kan rette fejlen &quot;React must be in scope when using JSX&quot; ved at bruge en af disse 5 anf\u00f8rte metoder.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/dk\/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-Danmark-122855885298660\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-13T06:32:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T19:03:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/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=\"L\u00e6r, hvordan du nemt kan rette fejlen &quot;React must be in scope when using JSX&quot; ved at bruge en af disse 5 anf\u00f8rte metoder.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/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_dk\" \/>\n<meta name=\"twitter:label1\" content=\"Skrevet af\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimeret l\u00e6setid\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutter\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/react-must-be-in-scope-when-using-jsx\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/react-must-be-in-scope-when-using-jsx\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/dk\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"S\u00e5dan l\u00f8ser du fejlen &#8220;React must be in scope when using JSX&#8221; (5 metoder)\",\"datePublished\":\"2023-04-13T06:32:29+00:00\",\"dateModified\":\"2025-10-01T19:03:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/react-must-be-in-scope-when-using-jsx\/\"},\"wordCount\":1032,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/dk\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/react-must-be-in-scope-when-using-jsx\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg\",\"inLanguage\":\"da-DK\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/dk\/blog\/react-must-be-in-scope-when-using-jsx\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/react-must-be-in-scope-when-using-jsx\/\",\"url\":\"https:\/\/kinsta.com\/dk\/blog\/react-must-be-in-scope-when-using-jsx\/\",\"name\":\"S\u00e5dan rettes fejlen \\\"React must be in scope when using JSX\\\" - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/dk\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/react-must-be-in-scope-when-using-jsx\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/react-must-be-in-scope-when-using-jsx\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg\",\"datePublished\":\"2023-04-13T06:32:29+00:00\",\"dateModified\":\"2025-10-01T19:03:02+00:00\",\"description\":\"L\u00e6r, hvordan du nemt kan rette fejlen \\\"React must be in scope when using JSX\\\" ved at bruge en af disse 5 anf\u00f8rte metoder.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/react-must-be-in-scope-when-using-jsx\/#breadcrumb\"},\"inLanguage\":\"da-DK\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/dk\/blog\/react-must-be-in-scope-when-using-jsx\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/react-must-be-in-scope-when-using-jsx\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg\",\"width\":6084,\"height\":3042,\"caption\":\"S\u00e5dan rettes fejlen \\\"React must be in scope when using JSX\\\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/dk\/blog\/react-must-be-in-scope-when-using-jsx\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/dk\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\",\"item\":\"https:\/\/kinsta.com\/dk\/emner\/react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"S\u00e5dan l\u00f8ser du fejlen &#8220;React must be in scope when using JSX&#8221; (5 metoder)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/dk\/#website\",\"url\":\"https:\/\/kinsta.com\/dk\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Hurtig, sikker, premium hostingl\u00f8sninger\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/dk\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/dk\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"da-DK\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/dk\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/dk\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\/\/kinsta.com\/dk\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/dk\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Danmark-122855885298660\/\",\"https:\/\/x.com\/kinsta_dk\",\"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\/dk\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\/\/kinsta.com\/dk\/#\/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\/dk\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"S\u00e5dan rettes fejlen \"React must be in scope when using JSX\" - Kinsta\u00ae","description":"L\u00e6r, hvordan du nemt kan rette fejlen \"React must be in scope when using JSX\" ved at bruge en af disse 5 anf\u00f8rte metoder.","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\/dk\/blog\/react-must-be-in-scope-when-using-jsx\/","og_locale":"da_DK","og_type":"article","og_title":"S\u00e5dan l\u00f8ser du fejlen \"React must be in scope when using JSX\" (5 metoder)","og_description":"L\u00e6r, hvordan du nemt kan rette fejlen \"React must be in scope when using JSX\" ved at bruge en af disse 5 anf\u00f8rte metoder.","og_url":"https:\/\/kinsta.com\/dk\/blog\/react-must-be-in-scope-when-using-jsx\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Danmark-122855885298660\/","article_published_time":"2023-04-13T06:32:29+00:00","article_modified_time":"2025-10-01T19:03:02+00:00","og_image":[{"width":6084,"height":3042,"url":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"L\u00e6r, hvordan du nemt kan rette fejlen \"React must be in scope when using JSX\" ved at bruge en af disse 5 anf\u00f8rte metoder.","twitter_image":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@kinsta_dk","twitter_misc":{"Skrevet af":"Joel Olawanle","Estimeret l\u00e6setid":"6 minutter"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/dk\/blog\/react-must-be-in-scope-when-using-jsx\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/dk\/blog\/react-must-be-in-scope-when-using-jsx\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/dk\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"S\u00e5dan l\u00f8ser du fejlen &#8220;React must be in scope when using JSX&#8221; (5 metoder)","datePublished":"2023-04-13T06:32:29+00:00","dateModified":"2025-10-01T19:03:02+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/dk\/blog\/react-must-be-in-scope-when-using-jsx\/"},"wordCount":1032,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/dk\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/dk\/blog\/react-must-be-in-scope-when-using-jsx\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg","inLanguage":"da-DK","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/dk\/blog\/react-must-be-in-scope-when-using-jsx\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/dk\/blog\/react-must-be-in-scope-when-using-jsx\/","url":"https:\/\/kinsta.com\/dk\/blog\/react-must-be-in-scope-when-using-jsx\/","name":"S\u00e5dan rettes fejlen \"React must be in scope when using JSX\" - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/dk\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/dk\/blog\/react-must-be-in-scope-when-using-jsx\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/dk\/blog\/react-must-be-in-scope-when-using-jsx\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg","datePublished":"2023-04-13T06:32:29+00:00","dateModified":"2025-10-01T19:03:02+00:00","description":"L\u00e6r, hvordan du nemt kan rette fejlen \"React must be in scope when using JSX\" ved at bruge en af disse 5 anf\u00f8rte metoder.","breadcrumb":{"@id":"https:\/\/kinsta.com\/dk\/blog\/react-must-be-in-scope-when-using-jsx\/#breadcrumb"},"inLanguage":"da-DK","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/dk\/blog\/react-must-be-in-scope-when-using-jsx\/"]}]},{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/kinsta.com\/dk\/blog\/react-must-be-in-scope-when-using-jsx\/#primaryimage","url":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg","contentUrl":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/04\/react-must-be-in-scope-when-using-jsx.jpg","width":6084,"height":3042,"caption":"S\u00e5dan rettes fejlen \"React must be in scope when using JSX\""},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/dk\/blog\/react-must-be-in-scope-when-using-jsx\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/dk\/"},{"@type":"ListItem","position":2,"name":"React","item":"https:\/\/kinsta.com\/dk\/emner\/react\/"},{"@type":"ListItem","position":3,"name":"S\u00e5dan l\u00f8ser du fejlen &#8220;React must be in scope when using JSX&#8221; (5 metoder)"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/dk\/#website","url":"https:\/\/kinsta.com\/dk\/","name":"Kinsta\u00ae","description":"Hurtig, sikker, premium hostingl\u00f8sninger","publisher":{"@id":"https:\/\/kinsta.com\/dk\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/dk\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"da-DK"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/dk\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/dk\/","logo":{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/kinsta.com\/dk\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/dk\/wp-content\/uploads\/sites\/12\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/dk\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Danmark-122855885298660\/","https:\/\/x.com\/kinsta_dk","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\/dk\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/kinsta.com\/dk\/#\/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\/dk\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/posts\/49996","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/comments?post=49996"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/posts\/49996\/revisions"}],"predecessor-version":[{"id":50490,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/posts\/49996\/revisions\/50490"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/49996\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/49996\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/49996\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/49996\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/49996\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/49996\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/49996\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/49996\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/49996\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/49996\/translations\/dk"},{"href":"https:\/\/kinsta.com\/dk\/wp-json\/kinsta\/v1\/posts\/49996\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/media\/49997"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/media?parent=49996"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/tags?post=49996"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/dk\/wp-json\/wp\/v2\/topic?post=49996"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}