{"id":69450,"date":"2024-03-13T12:16:33","date_gmt":"2024-03-13T11:16:33","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=69450&post_type=knowledgebase&preview_id=69450"},"modified":"2025-10-01T20:15:10","modified_gmt":"2025-10-01T19:15:10","slug":"jsx-ausdruecke-muessen-ein-uebergeordnetes-element-haben","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/jsx-ausdruecke-muessen-ein-uebergeordnetes-element-haben\/","title":{"rendered":"Wie man den Fehler „JSX-Ausdr\u00fccke m\u00fcssen ein \u00fcbergeordnetes Element haben“ in React behebt"},"content":{"rendered":"

JSX steht f\u00fcr JavaScript XML und ist eine Syntaxerweiterung f\u00fcr React<\/a>, die es Entwicklern<\/a> erm\u00f6glicht, HTML-\u00e4hnlichen<\/a> Code in ihren JavaScript-Dateien<\/a> zu schreiben.<\/p>\n

Bei der Arbeit mit JSX sto\u00dfen Anf\u00e4nger oft auf den Fehler „JSX-Ausdr\u00fccke m\u00fcssen ein \u00fcbergeordnetes Element haben“. Dieser Fehler tritt auf, wenn mehrere Elemente in einem einzigen Ausdruck zur\u00fcckgegeben werden, ohne dass sie von einem \u00fcbergeordneten Element umschlossen werden.<\/p>\n

Dieser Fehler ist dem Fehler „Benachbarte JSX-Elemente m\u00fcssen in ein umschlie\u00dfendes Tag eingeschlossen sein“ sehr \u00e4hnlich. Wolltest du ein JSX-Fragment <>…<\/>?“ Fehler.<\/p>\n

In diesem Artikel lernst du verschiedene L\u00f6sungen kennen, mit denen du dieses h\u00e4ufige Hindernis bei der Arbeit mit React umgehen kannst.
\n

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

Was ist die Ursache f\u00fcr den Fehler „JSX-Ausdr\u00fccke m\u00fcssen ein \u00fcbergeordnetes Element haben“?<\/h2>\n

In JSX gibt es eine Regel, die besagt, dass immer ein einzelnes Element zur\u00fcckgegeben werden muss. Diese Regel gilt auch f\u00fcr React, was bedeutet, dass jede Komponente<\/a> nur ein einziges Wurzelelement zur\u00fcckgeben kann.<\/p>\n

Das liegt daran, dass React beim Rendern einer Komponente einen virtuellen DOM-Baum erstellt, der dem HTML-Code entspricht, der letztendlich auf der Seite gerendert wird. Wenn es mehrere Root-Elemente in der JSX gibt, wei\u00df React nicht, wie es damit umgehen soll. Das f\u00fchrt zu dem Fehler „JSX-Ausdr\u00fccke m\u00fcssen ein \u00fcbergeordnetes Element haben“ oder „Benachbarte JSX-Elemente m\u00fcssen in ein umschlie\u00dfendes Tag eingeschlossen werden. Wolltest du ein JSX-Fragment <>…<\/>?“<\/p>\n

Wenn du zum Beispiel versuchst, den folgenden JSX-Code zu rendern:<\/p>\n

function App() {\n    return (\n        <h1>Hello, world!<\/h1>\n        <p>This is a paragraph.<\/p>\n    )\n}<\/code><\/pre>\n
Du bekommst die Fehlermeldung „JSX-Ausdr\u00fccke m\u00fcssen ein \u00fcbergeordnetes Element haben“:<\/p>\n
\"JSX-Ausdr\u00fccke
JSX-Ausdr\u00fccke m\u00fcssen ein \u00fcbergeordnetes Element haben-Fehlermeldung<\/figcaption><\/figure>\n
Oder die Fehlermeldung „Benachbarte JSX-Elemente m\u00fcssen von einem einschlie\u00dfenden Tag umschlossen werden. Wolltest du ein JSX-Fragment <>…<\/>?“ Fehler:<\/p>\n
\"Benachbarte
Benachbarte JSX-Elemente m\u00fcssen von einem umschlie\u00dfenden Tag umh\u00fcllt sein. Wolltest du ein JSX-Fragment <>…<\/>?-Fehlermeldung<\/figcaption><\/figure>\n
Das liegt daran, dass zwei Root-Elemente (<h1><\/code> und <p><\/code> zur\u00fcckgegeben werden.<\/p>\n
JSX funktioniert \u00e4hnlich wie eine Funktion, denn Funktionen k\u00f6nnen nicht mehrere Werte zur\u00fcckgeben (es sei denn, sie sind in einem Array eingeschlossen, das als ein einziger Wert gilt).<\/p>\n
function myFunc() {\n  return value1;\n  return value2;\n}<\/code><\/pre>\n
Die zweite R\u00fcckgabeanweisung in der Render-Funktion ist unerreichbar, weil die erste R\u00fcckgabeanweisung immer ausgef\u00fchrt wird, so dass die zweite Anweisung nicht ausgef\u00fchrt werden kann.<\/p>\n
3 Wege zur Behebung des Fehlers „JSX-Ausdr\u00fccke m\u00fcssen ein \u00fcbergeordnetes Element haben“<\/h2>\n
Es gibt drei Hauptmethoden, um diesen Fehler zu beheben:<\/p>\n
    \n
  • Verwendung eines Div Wrappers<\/li>\n
  • Verwendung eines Fragments (<> und <\/>)<\/li>\n
  • Verwendung der Komponente React.Fragment<\/li>\n<\/ul>\n
    1. Alle Elemente mit einem Div Wrapper einpacken<\/h3>\n
    Eine der einfachsten L\u00f6sungen f\u00fcr den Fehler „JSX-Ausdr\u00fccke m\u00fcssen ein \u00fcbergeordnetes Element haben“ besteht darin, mehrere JSX-Elemente in ein einziges \u00fcbergeordnetes Element, wie z. B. ein <div>, zu verpacken.<\/p>\n
    Auf diese Weise kannst du die Elemente gruppieren und als eine Einheit darstellen. Betrachte zum Beispiel die folgende Komponente:<\/p>\n
    function App() {\n    return (\n        <div>\n            <h1>Hello, world!<\/h1>\n           <p>This is a paragraph.<\/p>\n        <\/div>\n    )\n}<\/code><\/pre>\n
    In diesem Beispiel werden die Elemente <h1><\/code> und <p><\/code> von einem Element <div><\/code> umschlossen, das als \u00fcbergeordnetes Element dient.<\/p>\n
    2. Alle Elemente mit einem Fragment umh\u00fcllen<\/h3>\n
    Eine andere M\u00f6glichkeit, das Problem „JSX-Ausdr\u00fccke m\u00fcssen ein \u00fcbergeordnetes Element haben“ oder „Benachbarte JSX-Elemente m\u00fcssen von einem umschlie\u00dfenden Tag umh\u00fcllt werden. Wolltest du ein JSX-Fragment <>…<\/>?“ beheben, indem du ein JSX-Fragment verwendest.<\/p>\n
    Ein Fragment ist eine eingebaute Funktion von React, mit der du eine Liste von Kindern gruppieren kannst, ohne dem DOM zus\u00e4tzliche Knoten hinzuzuf\u00fcgen. Du kannst ein Fragment verwenden, um mehrere Elemente in ein einziges \u00fcbergeordnetes Element zu verpacken, ohne dem gerenderten HTML einen zus\u00e4tzlichen DOM-Knoten hinzuzuf\u00fcgen. Hier ist zum Beispiel eine Komponente:<\/p>\n
    function App() {\n    return (\n        <>\n            <h1>Hello, world!<\/h1>\n            <p>This is a paragraph.<\/p>\n        <\/>\n    )\n}<\/code><\/pre>\n
    In diesem Beispiel wird ein JSX-Fragment (<> und <\/>) verwendet, um mehrere Elemente zu verpacken. Dieses Fragment fungiert als \u00fcbergeordnetes Element.<\/p>\n
    3. Alle Elemente mit React.Fragment umh\u00fcllen<\/h3>\n
    Eine weitere M\u00f6glichkeit, den Fehler „JSX-Ausdr\u00fccke m\u00fcssen ein \u00fcbergeordnetes Element haben“ zu beheben, ist die Verwendung der Komponente React.Fragment<\/code> anstelle eines regul\u00e4ren Elements.<\/p>\n
    Dies funktioniert \u00e4hnlich wie die Verwendung eines JSX-Fragments, ist aber etwas expliziter und kann n\u00fctzlich sein, wenn du deinem \u00fcbergeordneten Element einen bestimmten Schl\u00fcssel oder andere Requisiten geben willst. Hier ist zum Beispiel eine Komponente:<\/p>\n
    function App() {\n    return (\n        <React.Fragment>\n            <h1>Hello, world!<\/h1>\n            <p>This is a paragraph.<\/p>\n       <\/React.Fragment>\n    )\n}<\/code><\/pre>\n
    In diesem Beispiel wird die Komponente React.Fragment<\/code> anstelle eines normalen\u00a0Elements verwendet, das als \u00fcbergeordnetes Element dient. Sie wickelt mehrere Elemente in die Tags ein. So kannst du die Elemente gruppieren, ohne dem gerenderten HTML einen zus\u00e4tzlichen Knoten hinzuzuf\u00fcgen.<\/p>\n
    F\u00fcr die Komponente React.Fragment<\/code> musst du React<\/strong> importieren. Sie erm\u00f6glicht es dir au\u00dferdem, Requisiten und auch className<\/code>, style<\/code> und id<\/code> zum Fragment selbst hinzuzuf\u00fcgen, was n\u00fctzlich ist, wenn du Stile oder andere Attribute auf die Gruppe von Elementen innerhalb des Fragments anwenden willst.<\/p>\n
    So behebst du den Fehler „JSX-Ausdr\u00fccke m\u00fcssen ein \u00fcbergeordnetes Element haben“ in Conditionals<\/h2>\n
    Wenn du mit bedingten Anweisungen arbeitest, die die tern\u00e4ren Operatoren in React verwenden, st\u00f6\u00dft du h\u00e4ufig auf die Fehlermeldung „JSX-Ausdr\u00fccke m\u00fcssen ein \u00fcbergeordnetes Element haben“ oder „Benachbarte JSX-Elemente m\u00fcssen in ein umschlie\u00dfendes Tag eingeschlossen werden. Wolltest du ein JSX-Fragment <>…<\/>?“.<\/p>\n
    Das passiert, wenn mehrere Elemente innerhalb einer bedingten Anweisung zur\u00fcckgegeben werden. In diesem Fall ist React nicht in der Lage, sie korrekt darzustellen, und es kommt zu einer der beiden Fehlermeldungen.<\/p>\n
    function App() {\n    return (\n        <div>\n            {condition ? (\n                <h1>Heading 1<\/h1>\n                <p>Paragraph 1<\/p>\n                        ) : (\n                <h2>Heading 2<\/h2>\n                <p>Paragraph 2<\/p>\n            )}\n        <\/div>\n    )\n}<\/code><\/pre>\n
    Du kannst diesen Fehler mit einer der drei Methoden beheben, die in diesem Artikel erkl\u00e4rt werden. Vorzugsweise kannst du das React-Fragment (<><\/code> und <\/><\/code>) oder das Element <div><\/code> verwenden.<\/p>\n
    function App() {\n    return (\n        <div>\n            {condition ? (\n                <>\n                    <h1>Heading 1<\/h1>\n                   <p>Paragraph 1<\/p>\n                <\/>\n            ) : (\n                <>\n                    <h2>Heading 2<\/h2>\n                    <p>Paragraph 2<\/p>\n                <\/>\n            )\n            }\n        <\/div>\n    )\n}<\/code><\/pre>\n
    Zusammenfassung<\/h2>\n
    Der Fehler „JSX-Ausdr\u00fccke m\u00fcssen ein \u00fcbergeordnetes Element haben“ oder „Benachbarte JSX-Elemente m\u00fcssen von einem umschlie\u00dfenden Tag umh\u00fcllt sein. Wolltest du ein JSX-Fragment <>…<\/>?“ ist eine h\u00e4ufige H\u00fcrde, auf die Anf\u00e4nger beim Erlernen von React sto\u00dfen.<\/p>\n
    Die Verwendung eines <div><\/code> Wrappers ist die einfachste L\u00f6sung, aber sie kann dem DOM unn\u00f6tige Divs hinzuf\u00fcgen. Fragmente bieten eine sauberere L\u00f6sung, ohne dem DOM zus\u00e4tzliche Knoten hinzuzuf\u00fcgen.<\/p>\n
    Jetzt bist du dran: Bist du schon einmal auf dieses Problem gesto\u00dfen? Wie hast du es gel\u00f6st? Gibt es noch andere Ans\u00e4tze, die du verwendet hast und die in diesem Artikel nicht behandelt werden? Lass es uns in den Kommentaren wissen!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
    JSX steht f\u00fcr JavaScript XML und ist eine Syntaxerweiterung f\u00fcr React, die es Entwicklern erm\u00f6glicht, HTML-\u00e4hnlichen Code in ihren JavaScript-Dateien zu schreiben. Bei der Arbeit mit …<\/p>\n","protected":false},"author":287,"featured_media":69451,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[975,977],"class_list":["post-69450","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-react","topic-react-fehler"],"yoast_head":"\nWie man den Fehler "JSX-Ausdr\u00fccke m\u00fcssen ein \u00fcbergeordnetes Element haben" in React behebt - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Lerne 3 Methoden, um den "JSX-Ausdr\u00fccke m\u00fcssen ein \u00fcbergeordnetes Element haben"-Fehler in React zu beheben, und erfahre, was den Fehler \u00fcberhaupt verursacht.\" \/>\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\/de\/blog\/jsx-ausdruecke-muessen-ein-uebergeordnetes-element-haben\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wie man den Fehler "JSX-Ausdr\u00fccke m\u00fcssen ein \u00fcbergeordnetes Element haben" in React behebt\" \/>\n<meta property=\"og:description\" content=\"Lerne 3 Methoden, um den "JSX-Ausdr\u00fccke m\u00fcssen ein \u00fcbergeordnetes Element haben"-Fehler in React zu beheben, und erfahre, was den Fehler \u00fcberhaupt verursacht.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/jsx-ausdruecke-muessen-ein-uebergeordnetes-element-haben\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-13T11:16:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T19:15:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/03\/jsx-expressions-must-have-one-parent-element.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"3042\" \/>\n\t<meta property=\"og:image:height\" content=\"1521\" \/>\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=\"Lerne 3 Methoden, um den "JSX-Ausdr\u00fccke m\u00fcssen ein \u00fcbergeordnetes Element haben"-Fehler in React zu beheben, und erfahre, was den Fehler \u00fcberhaupt verursacht.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/03\/jsx-expressions-must-have-one-parent-element.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"6\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/jsx-ausdruecke-muessen-ein-uebergeordnetes-element-haben\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/jsx-ausdruecke-muessen-ein-uebergeordnetes-element-haben\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Wie man den Fehler „JSX-Ausdr\u00fccke m\u00fcssen ein \u00fcbergeordnetes Element haben“ in React behebt\",\"datePublished\":\"2024-03-13T11:16:33+00:00\",\"dateModified\":\"2025-10-01T19:15:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/jsx-ausdruecke-muessen-ein-uebergeordnetes-element-haben\/\"},\"wordCount\":1064,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/jsx-ausdruecke-muessen-ein-uebergeordnetes-element-haben\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/03\/jsx-expressions-must-have-one-parent-element.jpg\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/jsx-ausdruecke-muessen-ein-uebergeordnetes-element-haben\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/jsx-ausdruecke-muessen-ein-uebergeordnetes-element-haben\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/jsx-ausdruecke-muessen-ein-uebergeordnetes-element-haben\/\",\"name\":\"Wie man den Fehler \\\"JSX-Ausdr\u00fccke m\u00fcssen ein \u00fcbergeordnetes Element haben\\\" in React behebt - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/jsx-ausdruecke-muessen-ein-uebergeordnetes-element-haben\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/jsx-ausdruecke-muessen-ein-uebergeordnetes-element-haben\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/03\/jsx-expressions-must-have-one-parent-element.jpg\",\"datePublished\":\"2024-03-13T11:16:33+00:00\",\"dateModified\":\"2025-10-01T19:15:10+00:00\",\"description\":\"Lerne 3 Methoden, um den \\\"JSX-Ausdr\u00fccke m\u00fcssen ein \u00fcbergeordnetes Element haben\\\"-Fehler in React zu beheben, und erfahre, was den Fehler \u00fcberhaupt verursacht.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/jsx-ausdruecke-muessen-ein-uebergeordnetes-element-haben\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/jsx-ausdruecke-muessen-ein-uebergeordnetes-element-haben\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/jsx-ausdruecke-muessen-ein-uebergeordnetes-element-haben\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/03\/jsx-expressions-must-have-one-parent-element.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/03\/jsx-expressions-must-have-one-parent-element.jpg\",\"width\":3042,\"height\":1521},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/jsx-ausdruecke-muessen-ein-uebergeordnetes-element-haben\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React-Fehler\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/react-fehler\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Wie man den Fehler „JSX-Ausdr\u00fccke m\u00fcssen ein \u00fcbergeordnetes Element haben“ in React behebt\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"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\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/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\/de\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Wie man den Fehler \"JSX-Ausdr\u00fccke m\u00fcssen ein \u00fcbergeordnetes Element haben\" in React behebt - Kinsta\u00ae","description":"Lerne 3 Methoden, um den \"JSX-Ausdr\u00fccke m\u00fcssen ein \u00fcbergeordnetes Element haben\"-Fehler in React zu beheben, und erfahre, was den Fehler \u00fcberhaupt verursacht.","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\/de\/blog\/jsx-ausdruecke-muessen-ein-uebergeordnetes-element-haben\/","og_locale":"de_DE","og_type":"article","og_title":"Wie man den Fehler \"JSX-Ausdr\u00fccke m\u00fcssen ein \u00fcbergeordnetes Element haben\" in React behebt","og_description":"Lerne 3 Methoden, um den \"JSX-Ausdr\u00fccke m\u00fcssen ein \u00fcbergeordnetes Element haben\"-Fehler in React zu beheben, und erfahre, was den Fehler \u00fcberhaupt verursacht.","og_url":"https:\/\/kinsta.com\/de\/blog\/jsx-ausdruecke-muessen-ein-uebergeordnetes-element-haben\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2024-03-13T11:16:33+00:00","article_modified_time":"2025-10-01T19:15:10+00:00","og_image":[{"width":3042,"height":1521,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/03\/jsx-expressions-must-have-one-parent-element.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Lerne 3 Methoden, um den \"JSX-Ausdr\u00fccke m\u00fcssen ein \u00fcbergeordnetes Element haben\"-Fehler in React zu beheben, und erfahre, was den Fehler \u00fcberhaupt verursacht.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/03\/jsx-expressions-must-have-one-parent-element.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Joel Olawanle","Gesch\u00e4tzte Lesezeit":"6\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/jsx-ausdruecke-muessen-ein-uebergeordnetes-element-haben\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/jsx-ausdruecke-muessen-ein-uebergeordnetes-element-haben\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Wie man den Fehler „JSX-Ausdr\u00fccke m\u00fcssen ein \u00fcbergeordnetes Element haben“ in React behebt","datePublished":"2024-03-13T11:16:33+00:00","dateModified":"2025-10-01T19:15:10+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/jsx-ausdruecke-muessen-ein-uebergeordnetes-element-haben\/"},"wordCount":1064,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/jsx-ausdruecke-muessen-ein-uebergeordnetes-element-haben\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/03\/jsx-expressions-must-have-one-parent-element.jpg","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/jsx-ausdruecke-muessen-ein-uebergeordnetes-element-haben\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/jsx-ausdruecke-muessen-ein-uebergeordnetes-element-haben\/","url":"https:\/\/kinsta.com\/de\/blog\/jsx-ausdruecke-muessen-ein-uebergeordnetes-element-haben\/","name":"Wie man den Fehler \"JSX-Ausdr\u00fccke m\u00fcssen ein \u00fcbergeordnetes Element haben\" in React behebt - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/jsx-ausdruecke-muessen-ein-uebergeordnetes-element-haben\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/jsx-ausdruecke-muessen-ein-uebergeordnetes-element-haben\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/03\/jsx-expressions-must-have-one-parent-element.jpg","datePublished":"2024-03-13T11:16:33+00:00","dateModified":"2025-10-01T19:15:10+00:00","description":"Lerne 3 Methoden, um den \"JSX-Ausdr\u00fccke m\u00fcssen ein \u00fcbergeordnetes Element haben\"-Fehler in React zu beheben, und erfahre, was den Fehler \u00fcberhaupt verursacht.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/jsx-ausdruecke-muessen-ein-uebergeordnetes-element-haben\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/jsx-ausdruecke-muessen-ein-uebergeordnetes-element-haben\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/jsx-ausdruecke-muessen-ein-uebergeordnetes-element-haben\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/03\/jsx-expressions-must-have-one-parent-element.jpg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/03\/jsx-expressions-must-have-one-parent-element.jpg","width":3042,"height":1521},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/jsx-ausdruecke-muessen-ein-uebergeordnetes-element-haben\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"React-Fehler","item":"https:\/\/kinsta.com\/de\/thema\/react-fehler\/"},{"@type":"ListItem","position":3,"name":"Wie man den Fehler „JSX-Ausdr\u00fccke m\u00fcssen ein \u00fcbergeordnetes Element haben“ in React behebt"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","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\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/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\/de\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/69450","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=69450"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/69450\/revisions"}],"predecessor-version":[{"id":69533,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/69450\/revisions\/69533"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69450\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69450\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69450\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69450\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69450\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69450\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69450\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69450\/translations\/es"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69450\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/69451"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=69450"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=69450"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=69450"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}