{"id":77028,"date":"2024-03-13T12:17:24","date_gmt":"2024-03-13T11:17:24","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=77028&#038;post_type=knowledgebase&#038;preview_id=77028"},"modified":"2025-10-01T20:42:58","modified_gmt":"2025-10-01T19:42:58","slug":"jsx-expressions-must-have-one-parent-element","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/jsx-expressions-must-have-one-parent-element\/","title":{"rendered":"Come risolvere l&#8217;errore &#8220;JSX expressions must have one parent element&#8221; in React"},"content":{"rendered":"<p>JSX, acronimo di JavaScript XML, \u00e8 un&#8217;estensione della sintassi di <a href=\"https:\/\/kinsta.com\/it\/blog\/react-js\/\">React<\/a> che permette agli <a href=\"https:\/\/kinsta.com\/it\/blog\/tipi-di-developer\/\">sviluppatori<\/a> di scrivere codice <a href=\"https:\/\/kinsta.com\/it\/blog\/html\/\">simile all&#8217;HTML<\/a> nei loro file <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a>.<\/p>\n<p>Quando si lavora con JSX, i principianti si imbattono spesso in un errore comune che dice: &#8220;JSX expressions must have one parent element&#8221; (JSX expressions must have one parent element). Questo errore si verifica quando pi\u00f9 elementi vengono restituiti in una singola espressione senza essere avvolti in un elemento genitore.<\/p>\n<p>Questo errore \u00e8 anche molto simile a &#8220;Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment &lt;&gt;&#8230;&lt;\/&gt;?&#8221; (Gli elementi JSX adiacenti devono essere racchiusi in un tag. Volevi un Fragment JSX &lt;&gt;&#8230;&lt;\/&gt;?).<\/p>\n<p>In questo articolo scopriremo le diverse soluzioni da utilizzare per evitare questo ostacolo comune lavorando con React.<br \/>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Cosa causa l&#8217;errore &#8220;JSX expressions must have one parent element&#8221;?<\/h2>\n<p>In JSX esiste una regola che stabilisce che le espressioni devono sempre restituire un singolo elemento. Questa regola si applica a React, il che significa che ogni <a href=\"https:\/\/kinsta.com\/it\/blog\/web-component\/\">componente<\/a> pu\u00f2 restituire solo un singolo elemento principale.<\/p>\n<p>Questo perch\u00e9 quando si esegue il rendering di un componente, React crea un albero DOM virtuale che corrisponde all&#8217;HTML che viene renderizzato nella pagina. Se ci sono pi\u00f9 elementi root nel JSX, React non sa come gestirli, il che si traduce nell&#8217;errore &#8220;JSX expressions must have one parent element&#8221; o &#8220;Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment \u2026?&#8221;<\/p>\n<p>Ad esempio, se proviamo a renderizzare il seguente codice JSX:<\/p>\n<pre><code class=\"language-jsx\">function App() {\n    return (\n        &lt;h1&gt;Hello, world!&lt;\/h1&gt;\n        &lt;p&gt;This is a paragraph.&lt;\/p&gt;\n    )\n}<\/code><\/pre>\n<p>Otterremo l&#8217;errore &#8220;JSX expressions must have one parent element&#8221;:<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/jsx-must-have-one-element-error.jpg\" alt=\"Messaggio d'errore JSX expressions must have one parent element\" width=\"1600\" height=\"144\"><figcaption class=\"wp-caption-text\">L&#8217;errore &#8220;JSX expressions must have one parent element&#8221;<\/figcaption><\/figure>\n<p>Oppure l&#8217;errore &#8220;Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment &lt;&gt;&#8230;&lt;\/&gt;?&#8221;:<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/use-frament-error.jpg\" alt=\"Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment &lt;&gt;...&lt;\/&gt;? error message\" width=\"1600\" height=\"87\"><figcaption class=\"wp-caption-text\">Errore Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment &lt;&gt;&#8230;&lt;\/&gt;?<\/figcaption><\/figure>\n<p>Questo perch\u00e9 vengono restituiti due elementi root (<code>&lt;h1&gt;<\/code> e <code>&lt;p&gt;<\/code> ).<\/p>\n<p>JSX opera in modo simile a una funzione perch\u00e9 le funzioni non possono restituire pi\u00f9 valori (a meno che non siano racchiusi in un array, che viene considerato un unico valore).<\/p>\n<pre><code class=\"language-jsx\">function myFunc() {\n  return value1;\n  return value2;\n}<\/code><\/pre>\n<p>La seconda istruzione di ritorno nella funzione render \u00e8 irraggiungibile perch\u00e9 la prima istruzione di ritorno verr\u00e0 sempre eseguita, rendendo impossibile l&#8217;esecuzione della seconda.<\/p>\n<h2>3 modi per risolvere l&#8217;errore &#8220;JSX expressions must have one parent element&#8221;<\/h2>\n<p>Esistono tre metodi principali per risolvere questo errore:<\/p>\n<ul>\n<li>Utilizzando un Div Wrapper<\/li>\n<li>Utilizzando un Fragment (&lt;&gt; e &lt;\/&gt;)<\/li>\n<li>Utilizzando il componente React.Fragment<\/li>\n<\/ul>\n<h3>1. Avvolgere tutti gli elementi con un Div Wrapper<\/h3>\n<p>Una delle soluzioni pi\u00f9 semplici all&#8217;errore &#8220;JSX expressions must have one parent element&#8221; \u00e8 quella di avvolgere gli elementi JSX multipli in un unico elemento genitore, come ad esempio un &lt;div&gt;.<\/p>\n<p>In questo modo \u00e8 possibile raggruppare e rendere gli elementi come un&#8217;unica unit\u00e0. Ad esempio, considera il componente qui sotto:<\/p>\n<pre><code class=\"language-jsx\">function App() {\n    return (\n        &lt;div&gt;\n            &lt;h1&gt;Hello, world!&lt;\/h1&gt;\n           &lt;p&gt;This is a paragraph.&lt;\/p&gt;\n        &lt;\/div&gt;\n    )\n}<\/code><\/pre>\n<p>In questo esempio, gli elementi <code>&lt;h1&gt;<\/code> e <code>&lt;p&gt;<\/code> sono racchiusi in un elemento <code>&lt;div&gt;<\/code>, che funge da elemento genitore.<\/p>\n<h3>2. Avvolgere tutti gli elementi con un Fragment<\/h3>\n<p>Un altro modo per risolvere il problema &#8220;JSX expressions must have one parent element&#8221; o &#8220;Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment &lt;&gt;&#8230;&lt;\/&gt;?&#8221; \u00e8 utilizzare un Fragment JSX.<\/p>\n<p>Un Fragment \u00e8 una funzione integrata di React che permette di raggruppare un elenco di child senza aggiungere altri nodi al DOM. Possiamo utilizzare un Fragment per avvolgere gli elementi multipli in un unico elemento genitore senza aggiungere un nodo DOM supplementare all&#8217;HTML renderizzato. Ad esempio, ecco un componente:<\/p>\n<pre><code class=\"language-jsx\">function App() {\n    return (\n        &lt;&gt;\n            &lt;h1&gt;Hello, world!&lt;\/h1&gt;\n            &lt;p&gt;This is a paragraph.&lt;\/p&gt;\n        &lt;\/&gt;\n    )\n}<\/code><\/pre>\n<p>In questo esempio, viene utilizzato un Fragment JSX (&lt;&gt; e &lt;\/&gt;) per avvolgere gli elementi multipli. Questo Fragment funge da elemento genitore.<\/p>\n<h3>3. Avvolgere tutti gli elementi con React.Fragment<\/h3>\n<p>Infine, un altro modo per risolvere l&#8217;errore &#8220;JSX expressions must have one parent element&#8221; \u00e8 quello di utilizzare il componente <code>React.Fragment<\/code> al posto di un normale elemento.<\/p>\n<p>Funziona in modo simile all&#8217;utilizzo di un Fragment JSX, ma \u00e8 un po&#8217; pi\u00f9 esplicito e pu\u00f2 essere utile se vogliamo dare all&#8217;elemento genitore una chiave specifica o altri prop. Ad esempio, ecco un componente:<\/p>\n<pre><code class=\"language-jsx\">function App() {\n    return (\n        &lt;React.Fragment&gt;\n            &lt;h1&gt;Hello, world!&lt;\/h1&gt;\n            &lt;p&gt;This is a paragraph.&lt;\/p&gt;\n       &lt;\/React.Fragment&gt;\n    )\n}<\/code><\/pre>\n<p>In questo esempio, il componente <code>React.Fragment<\/code> viene utilizzato al posto di un normale elemento per fungere da elemento genitore. Il componente avvolge pi\u00f9 elementi all&#8217;interno dei tag &lt;&gt;&lt;\/&gt;, il che permette di raggruppare gli elementi senza aggiungere un ulteriore nodo all&#8217;HTML renderizzato.<\/p>\n<p>Il componente <code>React.Fragment<\/code> richiede l&#8217;importazione di <strong>React<\/strong>. Inoltre, permette di aggiungere prop e anche <code>className<\/code>, <code>style<\/code> e <code>id<\/code> al Fragment stesso, il che \u00e8 utile quando si vogliono applicare stili o altri attributi al gruppo di elementi all&#8217;interno del Fragment.<\/p>\n<h2>Come risolvere l&#8217;errore &#8220;JSX expressions must have one parent element&#8221; nei condizionali<\/h2>\n<p>Quando si lavora con le dichiarazioni condizionali utilizzando gli operatori ternari in React, \u00e8 comune incontrare il messaggio di errore &#8220;JSX expressions must have one parent element&#8221; o &#8220;Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment &lt;&gt;&#8230;&lt;\/&gt;?&#8221;.<\/p>\n<p>Questo accade quando vengono restituiti pi\u00f9 elementi all&#8217;interno di un&#8217;istruzione condizionale. In questo caso, React non sar\u00e0 in grado di renderizzarli correttamente e si verificher\u00e0 uno dei due errori.<\/p>\n<pre><code class=\"language-jsx\">function App() {\n    return (\n        &lt;div&gt;\n            {condition ? (\n                &lt;h1&gt;Heading 1&lt;\/h1&gt;\n                &lt;p&gt;Paragraph 1&lt;\/p&gt;\n                        ) : (\n                &lt;h2&gt;Heading 2&lt;\/h2&gt;\n                &lt;p&gt;Paragraph 2&lt;\/p&gt;\n            )}\n        &lt;\/div&gt;\n    )\n}<\/code><\/pre>\n<p>Possiamo risolvere questo errore con uno dei tre metodi spiegati in questo articolo. Possiamo utilizzare il Fragment React (<code>&lt;&gt;<\/code> e <code>&lt;\/&gt;<\/code>) o l&#8217;elemento <code>&lt;div&gt;<\/code>.<\/p>\n<pre><code class=\"language-jsx\">function App() {\n    return (\n        &lt;div&gt;\n            {condition ? (\n                &lt;&gt;\n                    &lt;h1&gt;Heading 1&lt;\/h1&gt;\n                   &lt;p&gt;Paragraph 1&lt;\/p&gt;\n                &lt;\/&gt;\n            ) : (\n                &lt;&gt;\n                    &lt;h2&gt;Heading 2&lt;\/h2&gt;\n                    &lt;p&gt;Paragraph 2&lt;\/p&gt;\n                &lt;\/&gt;\n            )\n            }\n        &lt;\/div&gt;\n    )\n}<\/code><\/pre>\n<h2>Riepilogo<\/h2>\n<p>L&#8217;errore &#8220;JSX expressions must have one parent element&#8221; o &#8220;Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment &lt;&gt;&#8230;&lt;\/&gt;?&#8221; \u00e8 un ostacolo piuttosto comune che i principianti devono affrontare quando imparano React.<\/p>\n<p>L&#8217;utilizzo di un wrapper <code>&lt;div&gt;<\/code> \u00e8 la soluzione pi\u00f9 semplice, ma pu\u00f2 aggiungere div non necessari al DOM. I fragment offrono una soluzione pi\u00f9 pulita senza aggiungere altri nodi al DOM.<\/p>\n<p><em>Ora tocca a voi: avete mai incontrato questo problema? Come l&#8217;avete risolto? Ci sono altri approcci che avete utilizzato e che non sono stati trattati in questo articolo? Fatecelo sapere nei commenti!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>JSX, acronimo di JavaScript XML, \u00e8 un&#8217;estensione della sintassi di React che permette agli sviluppatori di scrivere codice simile all&#8217;HTML nei loro file JavaScript. Quando si &#8230;<\/p>\n","protected":false},"author":287,"featured_media":77029,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[26229,26212],"class_list":["post-77028","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-errori-di-react","topic-react"],"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>Come risolvere l&#039;errore &quot;JSX expressions must have one parent element&quot; in React - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Scopri 3 metodi per risolvere l&#039;errore &quot;JSX expressions must have one parent element&quot; in React e cosa causa questo errore.\" \/>\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\/it\/blog\/jsx-expressions-must-have-one-parent-element\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Come risolvere l&#039;errore &quot;JSX expressions must have one parent element&quot; in React\" \/>\n<meta property=\"og:description\" content=\"Scopri 3 metodi per risolvere l&#039;errore &quot;JSX expressions must have one parent element&quot; in React e cosa causa questo errore.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/it\/blog\/jsx-expressions-must-have-one-parent-element\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstaitalia\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-13T11:17:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T19:42:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/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=\"Scopri 3 metodi per risolvere l&#039;errore &quot;JSX expressions must have one parent element&quot; in React e cosa causa questo errore.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/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_IT\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/jsx-expressions-must-have-one-parent-element\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/jsx-expressions-must-have-one-parent-element\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Come risolvere l&#8217;errore &#8220;JSX expressions must have one parent element&#8221; in React\",\"datePublished\":\"2024-03-13T11:17:24+00:00\",\"dateModified\":\"2025-10-01T19:42:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/jsx-expressions-must-have-one-parent-element\/\"},\"wordCount\":1018,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/jsx-expressions-must-have-one-parent-element\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/jsx-expressions-must-have-one-parent-element.jpg\",\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/jsx-expressions-must-have-one-parent-element\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/jsx-expressions-must-have-one-parent-element\/\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/jsx-expressions-must-have-one-parent-element\/\",\"name\":\"Come risolvere l'errore \\\"JSX expressions must have one parent element\\\" in React - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/jsx-expressions-must-have-one-parent-element\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/jsx-expressions-must-have-one-parent-element\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/jsx-expressions-must-have-one-parent-element.jpg\",\"datePublished\":\"2024-03-13T11:17:24+00:00\",\"dateModified\":\"2025-10-01T19:42:58+00:00\",\"description\":\"Scopri 3 metodi per risolvere l'errore \\\"JSX expressions must have one parent element\\\" in React e cosa causa questo errore.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/jsx-expressions-must-have-one-parent-element\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/jsx-expressions-must-have-one-parent-element\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/jsx-expressions-must-have-one-parent-element\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/jsx-expressions-must-have-one-parent-element.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/jsx-expressions-must-have-one-parent-element.jpg\",\"width\":3042,\"height\":1521},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/jsx-expressions-must-have-one-parent-element\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Errori di React\",\"item\":\"https:\/\/kinsta.com\/it\/argomenti\/errori-di-react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Come risolvere l&#8217;errore &#8220;JSX expressions must have one parent element&#8221; in React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/it\/#website\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluzioni di hosting premium, veloci e sicure\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/it\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstaitalia\/\",\"https:\/\/x.com\/Kinsta_IT\",\"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\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/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\/it\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Come risolvere l'errore \"JSX expressions must have one parent element\" in React - Kinsta\u00ae","description":"Scopri 3 metodi per risolvere l'errore \"JSX expressions must have one parent element\" in React e cosa causa questo errore.","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\/it\/blog\/jsx-expressions-must-have-one-parent-element\/","og_locale":"it_IT","og_type":"article","og_title":"Come risolvere l'errore \"JSX expressions must have one parent element\" in React","og_description":"Scopri 3 metodi per risolvere l'errore \"JSX expressions must have one parent element\" in React e cosa causa questo errore.","og_url":"https:\/\/kinsta.com\/it\/blog\/jsx-expressions-must-have-one-parent-element\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2024-03-13T11:17:24+00:00","article_modified_time":"2025-10-01T19:42:58+00:00","og_image":[{"width":3042,"height":1521,"url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/jsx-expressions-must-have-one-parent-element.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Scopri 3 metodi per risolvere l'errore \"JSX expressions must have one parent element\" in React e cosa causa questo errore.","twitter_image":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/jsx-expressions-must-have-one-parent-element.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Joel Olawanle","Tempo di lettura stimato":"6 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/it\/blog\/jsx-expressions-must-have-one-parent-element\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/blog\/jsx-expressions-must-have-one-parent-element\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Come risolvere l&#8217;errore &#8220;JSX expressions must have one parent element&#8221; in React","datePublished":"2024-03-13T11:17:24+00:00","dateModified":"2025-10-01T19:42:58+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/jsx-expressions-must-have-one-parent-element\/"},"wordCount":1018,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/jsx-expressions-must-have-one-parent-element\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/jsx-expressions-must-have-one-parent-element.jpg","inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/it\/blog\/jsx-expressions-must-have-one-parent-element\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/it\/blog\/jsx-expressions-must-have-one-parent-element\/","url":"https:\/\/kinsta.com\/it\/blog\/jsx-expressions-must-have-one-parent-element\/","name":"Come risolvere l'errore \"JSX expressions must have one parent element\" in React - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/jsx-expressions-must-have-one-parent-element\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/jsx-expressions-must-have-one-parent-element\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/jsx-expressions-must-have-one-parent-element.jpg","datePublished":"2024-03-13T11:17:24+00:00","dateModified":"2025-10-01T19:42:58+00:00","description":"Scopri 3 metodi per risolvere l'errore \"JSX expressions must have one parent element\" in React e cosa causa questo errore.","breadcrumb":{"@id":"https:\/\/kinsta.com\/it\/blog\/jsx-expressions-must-have-one-parent-element\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/it\/blog\/jsx-expressions-must-have-one-parent-element\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/blog\/jsx-expressions-must-have-one-parent-element\/#primaryimage","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/jsx-expressions-must-have-one-parent-element.jpg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/jsx-expressions-must-have-one-parent-element.jpg","width":3042,"height":1521},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/it\/blog\/jsx-expressions-must-have-one-parent-element\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"Errori di React","item":"https:\/\/kinsta.com\/it\/argomenti\/errori-di-react\/"},{"@type":"ListItem","position":3,"name":"Come risolvere l&#8217;errore &#8220;JSX expressions must have one parent element&#8221; in React"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/it\/#website","url":"https:\/\/kinsta.com\/it\/","name":"Kinsta\u00ae","description":"Soluzioni di hosting premium, veloci e sicure","publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/it\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstaitalia\/","https:\/\/x.com\/Kinsta_IT","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\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/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\/it\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/77028","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/comments?post=77028"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/77028\/revisions"}],"predecessor-version":[{"id":77091,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/77028\/revisions\/77091"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77028\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77028\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77028\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77028\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77028\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77028\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77028\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77028\/translations\/es"},{"href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77028\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media\/77029"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media?parent=77028"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/tags?post=77028"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/topic?post=77028"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}