{"id":67664,"date":"2024-04-06T08:18:10","date_gmt":"2024-04-06T11:18:10","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=67664&post_type=knowledgebase&preview_id=67664"},"modified":"2025-10-01T17:00:28","modified_gmt":"2025-10-01T20:00:28","slug":"jsx-expressions-must-have-one-parent-element","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/jsx-expressions-must-have-one-parent-element\/","title":{"rendered":"Como Corrigir a Mensagem \u201cJSX expressions must have one parent element\u201d no React"},"content":{"rendered":"

JSX, que significa JavaScript XML, \u00e9 uma extens\u00e3o de sintaxe para o React<\/a> que permite aos desenvolvedores<\/a> escrever c\u00f3digo semelhante ao HTML<\/a> em seus arquivos JavaScript<\/a>.<\/p>\n

Ao trabalhar com JSX, os iniciantes geralmente encontram um erro comum que diz: \u201cJSX expressions must have one parent element\u201d. Esse erro ocorre quando v\u00e1rios elementos s\u00e3o retornados em uma \u00fanica express\u00e3o sem serem agrupados em um elemento principal.<\/p>\n

Esse erro tamb\u00e9m \u00e9 muito semelhante ao erro \u201cAdjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…<\/>?\u201d.<\/p>\n

Neste artigo, voc\u00ea aprender\u00e1 as diferentes solu\u00e7\u00f5es que pode usar para evitar esse obst\u00e1culo comum ao trabalhar com o React.
\n

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

O que causa o erro \u201cJSX expressions must have one parent element\u201d<\/h2>\n

No JSX, h\u00e1 uma regra que afirma que voc\u00ea deve sempre retornar um \u00fanico elemento. Essa regra se aplica ao React, o que significa que cada componente<\/a> s\u00f3 pode retornar um \u00fanico elemento raiz.<\/p>\n

Isso ocorre porque, quando voc\u00ea renderiza um componente, o React cria uma \u00e1rvore DOM virtual correspondente ao HTML que \u00e9 renderizado na p\u00e1gina. Se houver v\u00e1rios elementos-raiz no JSX, o React n\u00e3o saber\u00e1 como lidar com eles, o que resultar\u00e1 no erro \u201cJSX expressions must have one parent element\u201d ou “Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…<\/>?”<\/p>\n

Por exemplo, se voc\u00ea tentar renderizar o seguinte c\u00f3digo JSX:<\/p>\n

function App() {\n    return (\n        <h1>Hello, world!<\/h1>\n        <p>This is a paragraph.<\/p>\n    )\n}<\/code><\/pre>\n
Voc\u00ea receber\u00e1 o erro “JSX expressions must have one parent element”:<\/p>\n
\"Voc\u00ea
Voc\u00ea receber\u00e1 o erro “JSX expressions must have one parent element”.<\/figcaption><\/figure>\n
Ou o erro “Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…<\/>?”:<\/p>\n
\"Adjacent
“Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…<\/>?”.<\/figcaption><\/figure>\n
Isso ocorre porque dois elementos raiz <h1><\/code> e <p> <\/code>\u00a0s\u00e3o retornados.<\/p>\n
O JSX opera de forma semelhante a uma fun\u00e7\u00e3o, pois as fun\u00e7\u00f5es n\u00e3o podem retornar v\u00e1rios valores (a menos que estejam inclu\u00eddas em uma array, que \u00e9 considerada um \u00fanico valor).<\/p>\n
function myFunc() {\n  return value1;\n  return value2;\n}<\/code><\/pre>\n
A segunda instru\u00e7\u00e3o de retorno na fun\u00e7\u00e3o de renderiza\u00e7\u00e3o \u00e9 inacess\u00edvel porque a primeira instru\u00e7\u00e3o de retorno sempre ser\u00e1 executada, impossibilitando que a segunda seja executada.<\/p>\n
3 maneiras de corrigir o erro “JSX expressions must have one parent element”<\/h2>\n
H\u00e1 tr\u00eas maneiras principais de corrigir esse erro, que s\u00e3o as seguintes:<\/p>\n
    \n
  • Usando um Div Wrapper<\/li>\n
  • Usando um fragmento (<> e <\/>)<\/li>\n
  • Usando o componente React.Fragment<\/li>\n<\/ul>\n
    1. Envolva todos os elementos com um Div Wrapper<\/h3>\n
    Uma das solu\u00e7\u00f5es mais diretas para o erro “JSX expressions must have one parent element” \u00e9 envolver os v\u00e1rios elementos JSX em um \u00fanico elemento principal (parent), como um <div>.<\/p>\n
    Fazendo isso, voc\u00ea pode agrupar e renderizar os elementos como uma \u00fanica unidade. Por exemplo, considere o componente abaixo:<\/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
    Neste exemplo, os elementos <h1><\/code> e <p><\/code> s\u00e3o agrupados em um elemento <div><\/code>, que serve como elemento pai.<\/p>\n
    2. Envolva todos os elementos com um fragmento<\/h3>\n
    Outra maneira de corrigir o problema “JSX expressions must have one parent element” ou “Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…<\/>?” \u00e9 usar um fragmento JSX.<\/p>\n
    Um Fragmento \u00e9 um recurso interno do React que permite que voc\u00ea agrupe uma lista de “children” sem adicionar nodes extras ao DOM. Voc\u00ea pode usar um Fragmento para agrupar v\u00e1rios elementos em um \u00fanico elemento principal sem adicionar um node DOM extra ao HTML renderizado. Por exemplo, aqui est\u00e1 um componente:<\/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
    Neste exemplo, um fragmento JSX (<> e <\/>) \u00e9 usado para envolver os v\u00e1rios elementos. Esse fragmento atua como um elemento principal.<\/p>\n
    3. Envolva todos os elementos com React.Fragment<\/h3>\n
    Por fim, outra maneira de corrigir o erro “JSX expressions must have one parent element” \u00e9 usar o componente React.Fragment<\/code> em vez de um elemento regular.<\/p>\n
    Isso funciona de forma semelhante ao uso de um fragmento JSX, mas \u00e9 um pouco mais expl\u00edcito e pode ser \u00fatil se voc\u00ea quiser dar ao seu elemento principal uma chave espec\u00edfica ou outros adere\u00e7os. Por exemplo, aqui est\u00e1 um componente:<\/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
    Neste exemplo, o componente React.Fragment<\/code> \u00e9 usado em vez de um componente normal para servir como elemento principal. Ele envolve v\u00e1rios elementos dentro das tags, o que permite que voc\u00ea agrupe os elementos sem adicionar um n\u00f3 extra ao HTML renderizado.<\/p>\n
    O componente React.Fragment<\/code> exigir\u00e1 que voc\u00ea importe o React<\/strong>. Ele tamb\u00e9m permite que voc\u00ea adicione props e tamb\u00e9m className<\/code>, style<\/code> e id<\/code> ao pr\u00f3prio fragmento, o que \u00e9 \u00fatil quando voc\u00ea deseja aplicar estilos ou outros atributos ao grupo de elementos dentro do fragmento.<\/p>\n
    Como corrigir o erro “JSX expressions must have one parent element” em condicionais<\/h2>\n
    Quando voc\u00ea trabalha com instru\u00e7\u00f5es condicionais usando os operadores tern\u00e1rios no React, \u00e9 comum encontrar a mensagem de erro “JSX expressions must have one parent element” ou “Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…<\/>?”.<\/p>\n
    Isso acontece quando v\u00e1rios elementos s\u00e3o retornados de dentro de uma instru\u00e7\u00e3o condicional. Nesse caso, o React n\u00e3o ser\u00e1 capaz de renderiz\u00e1-los corretamente e isso resultar\u00e1 em um dos erros.<\/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
    Voc\u00ea pode corrigir esse erro com qualquer um dos tr\u00eas m\u00e9todos explicados neste artigo. De prefer\u00eancia, voc\u00ea pode usar o fragmento React (<><\/code> e <\/><\/code>) ou o elemento <div><\/code>.<\/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
    Resumo<\/h2>\n
    O erro “JSX expressions must have one parent element” ou “Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…<\/>?” \u00e9 um obst\u00e1culo comum que os iniciantes enfrentam ao aprender React.<\/p>\n
    Usar um wrapper <div><\/code> \u00e9 a solu\u00e7\u00e3o mais f\u00e1cil, mas pode adicionar divs desnecess\u00e1rios ao DOM. Os fragmentos fornecem uma solu\u00e7\u00e3o mais limpa sem adicionar nodes extras ao DOM.<\/p>\n
    Agora \u00e9 sua vez: J\u00e1 enfrentou esse problema? Como voc\u00ea o superou? Existe alguma solu\u00e7\u00e3o que voc\u00ea aplicou e que n\u00e3o mencionamos no artigo? Compartilhe conosco nos coment\u00e1rios!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
    JSX, que significa JavaScript XML, \u00e9 uma extens\u00e3o de sintaxe para o React que permite aos desenvolvedores escrever c\u00f3digo semelhante ao HTML em seus arquivos JavaScript. …<\/p>\n","protected":false},"author":287,"featured_media":67665,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1003,1002],"class_list":["post-67664","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-erros-do-react","topic-react"],"yoast_head":"\nComo Corrigir a Mensagem \u201cJSX expressions must have one parent element\u201d no React - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Aprenda 3 m\u00e9todos para corrigir o erro \u201cJSX expressions must have one parent element\u201d em React, bem como entender o que causa o erro.\" \/>\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\/pt\/blog\/jsx-expressions-must-have-one-parent-element\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Corrigir a Mensagem \u201cJSX expressions must have one parent element\u201d no React\" \/>\n<meta property=\"og:description\" content=\"Aprenda 3 m\u00e9todos para corrigir o erro \u201cJSX expressions must have one parent element\u201d em React, bem como entender o que causa o erro.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/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\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-06T11:18:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T20:00:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/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=\"Aprenda 3 m\u00e9todos para corrigir o erro \u201cJSX expressions must have one parent element\u201d em React, bem como entender o que causa o erro.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/03\/jsx-expressions-must-have-one-parent-element-1024x512.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/jsx-expressions-must-have-one-parent-element\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/jsx-expressions-must-have-one-parent-element\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Como Corrigir a Mensagem \u201cJSX expressions must have one parent element\u201d no React\",\"datePublished\":\"2024-04-06T11:18:10+00:00\",\"dateModified\":\"2025-10-01T20:00:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/jsx-expressions-must-have-one-parent-element\/\"},\"wordCount\":1040,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/jsx-expressions-must-have-one-parent-element\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/03\/jsx-expressions-must-have-one-parent-element.jpg\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/jsx-expressions-must-have-one-parent-element\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/jsx-expressions-must-have-one-parent-element\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/jsx-expressions-must-have-one-parent-element\/\",\"name\":\"Como Corrigir a Mensagem \u201cJSX expressions must have one parent element\u201d no React - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/jsx-expressions-must-have-one-parent-element\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/jsx-expressions-must-have-one-parent-element\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/03\/jsx-expressions-must-have-one-parent-element.jpg\",\"datePublished\":\"2024-04-06T11:18:10+00:00\",\"dateModified\":\"2025-10-01T20:00:28+00:00\",\"description\":\"Aprenda 3 m\u00e9todos para corrigir o erro \u201cJSX expressions must have one parent element\u201d em React, bem como entender o que causa o erro.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/jsx-expressions-must-have-one-parent-element\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/jsx-expressions-must-have-one-parent-element\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/jsx-expressions-must-have-one-parent-element\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/03\/jsx-expressions-must-have-one-parent-element.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/03\/jsx-expressions-must-have-one-parent-element.jpg\",\"width\":3042,\"height\":1521},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/jsx-expressions-must-have-one-parent-element\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Erros do React\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/erros-do-react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Como Corrigir a Mensagem \u201cJSX expressions must have one parent element\u201d no React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"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\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/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\/pt\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Como Corrigir a Mensagem \u201cJSX expressions must have one parent element\u201d no React - Kinsta\u00ae","description":"Aprenda 3 m\u00e9todos para corrigir o erro \u201cJSX expressions must have one parent element\u201d em React, bem como entender o que causa o erro.","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\/pt\/blog\/jsx-expressions-must-have-one-parent-element\/","og_locale":"pt_PT","og_type":"article","og_title":"Como Corrigir a Mensagem \u201cJSX expressions must have one parent element\u201d no React","og_description":"Aprenda 3 m\u00e9todos para corrigir o erro \u201cJSX expressions must have one parent element\u201d em React, bem como entender o que causa o erro.","og_url":"https:\/\/kinsta.com\/pt\/blog\/jsx-expressions-must-have-one-parent-element\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2024-04-06T11:18:10+00:00","article_modified_time":"2025-10-01T20:00:28+00:00","og_image":[{"width":3042,"height":1521,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/03\/jsx-expressions-must-have-one-parent-element.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Aprenda 3 m\u00e9todos para corrigir o erro \u201cJSX expressions must have one parent element\u201d em React, bem como entender o que causa o erro.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/03\/jsx-expressions-must-have-one-parent-element-1024x512.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Joel Olawanle","Tempo estimado de leitura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/jsx-expressions-must-have-one-parent-element\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/jsx-expressions-must-have-one-parent-element\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Como Corrigir a Mensagem \u201cJSX expressions must have one parent element\u201d no React","datePublished":"2024-04-06T11:18:10+00:00","dateModified":"2025-10-01T20:00:28+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/jsx-expressions-must-have-one-parent-element\/"},"wordCount":1040,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/jsx-expressions-must-have-one-parent-element\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/03\/jsx-expressions-must-have-one-parent-element.jpg","inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/jsx-expressions-must-have-one-parent-element\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/jsx-expressions-must-have-one-parent-element\/","url":"https:\/\/kinsta.com\/pt\/blog\/jsx-expressions-must-have-one-parent-element\/","name":"Como Corrigir a Mensagem \u201cJSX expressions must have one parent element\u201d no React - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/jsx-expressions-must-have-one-parent-element\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/jsx-expressions-must-have-one-parent-element\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/03\/jsx-expressions-must-have-one-parent-element.jpg","datePublished":"2024-04-06T11:18:10+00:00","dateModified":"2025-10-01T20:00:28+00:00","description":"Aprenda 3 m\u00e9todos para corrigir o erro \u201cJSX expressions must have one parent element\u201d em React, bem como entender o que causa o erro.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/jsx-expressions-must-have-one-parent-element\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/jsx-expressions-must-have-one-parent-element\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/jsx-expressions-must-have-one-parent-element\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/03\/jsx-expressions-must-have-one-parent-element.jpg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/03\/jsx-expressions-must-have-one-parent-element.jpg","width":3042,"height":1521},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/jsx-expressions-must-have-one-parent-element\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Erros do React","item":"https:\/\/kinsta.com\/pt\/topicos\/erros-do-react\/"},{"@type":"ListItem","position":3,"name":"Como Corrigir a Mensagem \u201cJSX expressions must have one parent element\u201d no React"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","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\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/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\/pt\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/67664","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=67664"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/67664\/revisions"}],"predecessor-version":[{"id":67908,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/67664\/revisions\/67908"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67664\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67664\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67664\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67664\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67664\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67664\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67664\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67664\/translations\/es"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67664\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/67665"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=67664"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=67664"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=67664"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}