{"id":74251,"date":"2024-04-02T12:16:49","date_gmt":"2024-04-02T10:16:49","guid":{"rendered":"https:\/\/kinqsta.com\/es\/?p=74251&post_type=knowledgebase&preview_id=74251"},"modified":"2025-10-01T21:29:04","modified_gmt":"2025-10-01T19:29:04","slug":"jsx-expressions-must-have-one-parent-element","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/es\/blog\/jsx-expressions-must-have-one-parent-element\/","title":{"rendered":"C\u00f3mo Solucionar \u00abJSX expressions must have one parent element (Las expresiones JSX deben tener un elemento padre)\u00bb en React"},"content":{"rendered":"

JSX, que significa JavaScript XML, es una extensi\u00f3n de sintaxis para React<\/a> que permite a los desarrolladores<\/a> escribir c\u00f3digo similar al HTML<\/a> en sus archivos JavaScript<\/a>.<\/p>\n

Al trabajar con JSX, los principiantes suelen encontrarse con un error com\u00fan que dice: \u00abJSX expressions must have one parent element (Las expresiones JSX deben tener un elemento padre)\u00bb. Este error se produce cuando se devuelven varios elementos en una \u00fanica expresi\u00f3n sin estar envueltos en un elemento padre.<\/p>\n

Este error tambi\u00e9n es muy similar al error \u00abAdjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>\u2026<\/>? (Los elementos JSX adyacentes deben estar envueltos en una etiqueta envolvente\u00bb. \u00bfQuer\u00edas un fragmento JSX <>…<\/>?)\u00bb.<\/p>\n

En este art\u00edculo, aprender\u00e1s las diferentes soluciones que puedes utilizar para evitar este problema com\u00fan cuando trabajas con React.
\n

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

\u00bfQu\u00e9 causa el error \u00abJSX expressions must have one parent element\u00bb?<\/h2>\n

En JSX, existe una regla que establece que siempre debe devolver un \u00fanico elemento. Esta regla se aplica a React, lo que significa que cada componente<\/a> s\u00f3lo puede devolver un \u00fanico elemento ra\u00edz.<\/p>\n

Esto se debe a que cuando renderizas un componente, React crea un \u00e1rbol DOM virtual correspondiente al HTML que se renderiza finalmente en la p\u00e1gina. Si hay varios elementos ra\u00edz en el JSX, React no sabe c\u00f3mo manejarlos, lo que provoca el error \u00abJSX expressions must have one parent element\u00bb o \u00abAdjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>\u2026<\/>?\u00bb<\/p>\n

Por ejemplo, si intentas renderizar el siguiente 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
Obtendr\u00e1s el error \u00abJSX expressions must have one parent element\u00bb:<\/p>\n
\"Mensaje
error JSX expressions must have one parent element<\/figcaption><\/figure>\n
O el error \u00abAdjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>\u2026<\/>?\u00bb error:<\/p>\n
\"Mensaje
Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…<\/>?<\/figcaption><\/figure>\n
Esto se debe a que se devuelven dos elementos ra\u00edz (<h1><\/code> y <p><\/code>.<\/p>\n
JSX funciona de forma similar a una funci\u00f3n, porque las funciones no pueden devolver varios valores (a menos que est\u00e9n encerrados en un array, que se considera un \u00fanico valor).<\/p>\n
function myFunc() {\n  return value1;\n  return value2;\n}<\/code><\/pre>\n
La segunda sentencia de retorno de la funci\u00f3n render es inalcanzable porque la primera sentencia de retorno siempre se ejecutar\u00e1, haciendo imposible que se ejecute la segunda.<\/p>\n
3 Formas de Solucionar el Error \u00abJSX expressions must have one parent element\u201d<\/h2>\n
Hay tres formas principales de solucionar este error, estos m\u00e9todos son:<\/p>\n
    \n
  • Usando un Contenedor Div<\/li>\n
  • Usando un Fragmento (<> and <\/>)<\/li>\n
  • Usando el componente React.Fragment<\/li>\n<\/ul>\n
    1. Envolver Todos los Elementos con un Contenedor Div<\/h3>\n
    Una de las soluciones m\u00e1s sencillas al error \u00abJSX expressions must have one parent element\u00bb es envolver los m\u00faltiples elementos JSX en un \u00fanico elemento padre, como un <div>.<\/p>\n
    Esto te permite agrupar y representar los elementos como una sola unidad. Por ejemplo, considera el siguiente componente:<\/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
    En este ejemplo, los elementos <h1><\/code> y <p><\/code> est\u00e1n envueltos en un elemento <div><\/code>, que sirve como elemento padre.<\/p>\n
    2. Envolver Todos los Elementos con un Fragmento<\/h3>\n
    Otra forma de solucionar el problema de \u00abJSX expressions must have one parent element\u00bb o \u00abAdjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…<\/>?\u00bb\u00a0 es utilizar un Fragmento JSX.<\/p>\n
    Un Fragmento es una funci\u00f3n incorporada de React que te permite agrupar una lista de hijos sin a\u00f1adir nodos adicionales al DOM. Puedes utilizar un Fragmento para envolver varios elementos en un \u00fanico elemento padre sin a\u00f1adir un nodo DOM adicional al HTML renderizado. Por ejemplo, aqu\u00ed tienes un 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
    En este ejemplo, se utiliza un Fragmento JSX (<> and <\/>) para envolver los m\u00faltiples elementos. Este fragmento act\u00faa como elemento padre.<\/p>\n
    3. Envolver Todos los Elementos con React.Fragment<\/h3>\n
    Por \u00faltimo, otra forma de solucionar el error \u00abJSX expressions must have one parent element\u00bb es utilizar el componente React.Fragment<\/code> en lugar de un elemento normal.<\/p>\n
    Esto funciona de forma similar a utilizar un Fragmento JSX, pero es un poco m\u00e1s expl\u00edcito y puede ser \u00fatil si quieres dar a tu elemento padre una clave espec\u00edfica u otras propiedades. Por ejemplo, aqu\u00ed tienes un 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
    En este ejemplo, se utiliza el componente React.Fragment<\/code> en lugar de un componente normal como elemento padre. Envuelve m\u00faltiples elementos dentro de las etiquetas, lo que te permite agrupar los elementos sin a\u00f1adir un nodo extra al HTML renderizado.<\/p>\n
    El componente React.Fragment<\/code> requerir\u00e1 que importes React<\/strong>. Tambi\u00e9n te permite a\u00f1adir props, as\u00ed como className<\/code>, style<\/code>, e id<\/code> al propio fragmento, lo que resulta \u00fatil cuando quieres aplicar estilos u otros atributos al grupo de elementos dentro del fragmento.<\/p>\n
    C\u00f3mo Solucionar el Error \u00abJSX expressions must have one parent element\u00bb en Condicionales<\/h2>\n
    Cuando trabajas con sentencias condicionales utilizando los operadores ternarios en React, es habitual encontrarse con el mensaje de error \u00abJSX expressions must have one parent element\u00bb o \u00abAdjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…<\/>?\u00bb.<\/p>\n
    Esto ocurre cuando se devuelven varios elementos dentro de una sentencia condicional. En ese caso, React no podr\u00e1 renderizarlos correctamente, y se producir\u00e1 cualquiera de los dos errores.<\/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
    Puedes solucionar este error con cualquiera de los tres m\u00e9todos explicados en este art\u00edculo. Preferiblemente puedes utilizar el fragmento React (<><\/code> and <\/><\/code>) o el 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
    Resumen<\/h2>\n
    El error \u00abJSX expressions must have one parent element\u00bb o \u00abAdjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…<\/>?\u00bb es un obst\u00e1culo habitual al que se enfrentan los principiantes cuando aprenden React.<\/p>\n
    Utilizar una envoltura <div><\/code> es la soluci\u00f3n m\u00e1s sencilla, pero puede a\u00f1adir divs innecesarios al DOM. Los fragmentos proporcionan una soluci\u00f3n m\u00e1s limpia sin a\u00f1adir nodos adicionales al DOM.<\/p>\n
    Ahora te toca a ti: \u00bfTe has encontrado alguna vez con este problema? \u00bfC\u00f3mo lo resolviste? \u00bfHay alg\u00fan otro m\u00e9todo que hayas utilizado y que no se haya tratado en este art\u00edculo? \u00a1H\u00e1znoslo saber en los comentarios!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
    JSX, que significa JavaScript XML, es una extensi\u00f3n de sintaxis para React que permite a los desarrolladores escribir c\u00f3digo similar al HTML en sus archivos JavaScript. …<\/p>\n","protected":false},"author":287,"featured_media":74252,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1322,1321],"class_list":["post-74251","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-errores-react","topic-react"],"yoast_head":"\nC\u00f3mo Solucionar "JSX expressions must have one parent element" en React<\/title>\n<meta name=\"description\" content=\"Aprende 3 m\u00e9todos para solucionar el error \u201cJSX expressions must have one parent element\u201d en React, as\u00ed como las causas del error para empezar.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinqsta.com\/es\/blog\/jsx-expressions-must-have-one-parent-element\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo Solucionar "JSX expressions must have one parent element (Las expresiones JSX deben tener un elemento padre)" en React\" \/>\n<meta property=\"og:description\" content=\"Aprende 3 m\u00e9todos para solucionar el error \u201cJSX expressions must have one parent element\u201d en React, as\u00ed como las causas del error para empezar.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/es\/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\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-02T10:16:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T19:29:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/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=\"Aprende 3 m\u00e9todos para solucionar el error \u201cJSX expressions must have one parent element\u201d en React, as\u00ed como las causas del error para empezar.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/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_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\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:\/\/kinqsta.com\/es\/blog\/jsx-expressions-must-have-one-parent-element\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/jsx-expressions-must-have-one-parent-element\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinqsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"C\u00f3mo Solucionar \u00abJSX expressions must have one parent element (Las expresiones JSX deben tener un elemento padre)\u00bb en React\",\"datePublished\":\"2024-04-02T10:16:49+00:00\",\"dateModified\":\"2025-10-01T19:29:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/jsx-expressions-must-have-one-parent-element\/\"},\"wordCount\":1080,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/jsx-expressions-must-have-one-parent-element\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/03\/jsx-expressions-must-have-one-parent-element.jpg\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/es\/blog\/jsx-expressions-must-have-one-parent-element\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/jsx-expressions-must-have-one-parent-element\/\",\"url\":\"https:\/\/kinqsta.com\/es\/blog\/jsx-expressions-must-have-one-parent-element\/\",\"name\":\"C\u00f3mo Solucionar \\\"JSX expressions must have one parent element\\\" en React\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/jsx-expressions-must-have-one-parent-element\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/jsx-expressions-must-have-one-parent-element\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/03\/jsx-expressions-must-have-one-parent-element.jpg\",\"datePublished\":\"2024-04-02T10:16:49+00:00\",\"dateModified\":\"2025-10-01T19:29:04+00:00\",\"description\":\"Aprende 3 m\u00e9todos para solucionar el error \u201cJSX expressions must have one parent element\u201d en React, as\u00ed como las causas del error para empezar.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/jsx-expressions-must-have-one-parent-element\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/es\/blog\/jsx-expressions-must-have-one-parent-element\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/jsx-expressions-must-have-one-parent-element\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/03\/jsx-expressions-must-have-one-parent-element.jpg\",\"contentUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/03\/jsx-expressions-must-have-one-parent-element.jpg\",\"width\":3042,\"height\":1521},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/jsx-expressions-must-have-one-parent-element\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Errores React\",\"item\":\"https:\/\/kinqsta.com\/es\/secciones\/errores-react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"C\u00f3mo Solucionar \u00abJSX expressions must have one parent element (Las expresiones JSX deben tener un elemento padre)\u00bb en React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/es\/#website\",\"url\":\"https:\/\/kinqsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinqsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"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:\/\/kinqsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinqsta.com\/es\/#\/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:\/\/kinqsta.com\/es\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"C\u00f3mo Solucionar \"JSX expressions must have one parent element\" en React","description":"Aprende 3 m\u00e9todos para solucionar el error \u201cJSX expressions must have one parent element\u201d en React, as\u00ed como las causas del error para empezar.","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:\/\/kinqsta.com\/es\/blog\/jsx-expressions-must-have-one-parent-element\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo Solucionar \"JSX expressions must have one parent element (Las expresiones JSX deben tener un elemento padre)\" en React","og_description":"Aprende 3 m\u00e9todos para solucionar el error \u201cJSX expressions must have one parent element\u201d en React, as\u00ed como las causas del error para empezar.","og_url":"https:\/\/kinqsta.com\/es\/blog\/jsx-expressions-must-have-one-parent-element\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2024-04-02T10:16:49+00:00","article_modified_time":"2025-10-01T19:29:04+00:00","og_image":[{"width":3042,"height":1521,"url":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/03\/jsx-expressions-must-have-one-parent-element.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Aprende 3 m\u00e9todos para solucionar el error \u201cJSX expressions must have one parent element\u201d en React, as\u00ed como las causas del error para empezar.","twitter_image":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/03\/jsx-expressions-must-have-one-parent-element-1024x512.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Joel Olawanle","Tiempo de lectura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/es\/blog\/jsx-expressions-must-have-one-parent-element\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/es\/blog\/jsx-expressions-must-have-one-parent-element\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinqsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"C\u00f3mo Solucionar \u00abJSX expressions must have one parent element (Las expresiones JSX deben tener un elemento padre)\u00bb en React","datePublished":"2024-04-02T10:16:49+00:00","dateModified":"2025-10-01T19:29:04+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/es\/blog\/jsx-expressions-must-have-one-parent-element\/"},"wordCount":1080,"commentCount":0,"publisher":{"@id":"https:\/\/kinqsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/es\/blog\/jsx-expressions-must-have-one-parent-element\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/03\/jsx-expressions-must-have-one-parent-element.jpg","inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/es\/blog\/jsx-expressions-must-have-one-parent-element\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/es\/blog\/jsx-expressions-must-have-one-parent-element\/","url":"https:\/\/kinqsta.com\/es\/blog\/jsx-expressions-must-have-one-parent-element\/","name":"C\u00f3mo Solucionar \"JSX expressions must have one parent element\" en React","isPartOf":{"@id":"https:\/\/kinqsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/es\/blog\/jsx-expressions-must-have-one-parent-element\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/es\/blog\/jsx-expressions-must-have-one-parent-element\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/03\/jsx-expressions-must-have-one-parent-element.jpg","datePublished":"2024-04-02T10:16:49+00:00","dateModified":"2025-10-01T19:29:04+00:00","description":"Aprende 3 m\u00e9todos para solucionar el error \u201cJSX expressions must have one parent element\u201d en React, as\u00ed como las causas del error para empezar.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/es\/blog\/jsx-expressions-must-have-one-parent-element\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/es\/blog\/jsx-expressions-must-have-one-parent-element\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinqsta.com\/es\/blog\/jsx-expressions-must-have-one-parent-element\/#primaryimage","url":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/03\/jsx-expressions-must-have-one-parent-element.jpg","contentUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/03\/jsx-expressions-must-have-one-parent-element.jpg","width":3042,"height":1521},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/es\/blog\/jsx-expressions-must-have-one-parent-element\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Errores React","item":"https:\/\/kinqsta.com\/es\/secciones\/errores-react\/"},{"@type":"ListItem","position":3,"name":"C\u00f3mo Solucionar \u00abJSX expressions must have one parent element (Las expresiones JSX deben tener un elemento padre)\u00bb en React"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/es\/#website","url":"https:\/\/kinqsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinqsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinqsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","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:\/\/kinqsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinqsta.com\/es\/#\/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:\/\/kinqsta.com\/es\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts\/74251","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/comments?post=74251"}],"version-history":[{"count":10,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts\/74251\/revisions"}],"predecessor-version":[{"id":74503,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts\/74251\/revisions\/74503"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74251\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74251\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74251\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74251\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74251\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74251\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74251\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74251\/translations\/es"},{"href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74251\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/media\/74252"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/media?parent=74251"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/tags?post=74251"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/topic?post=74251"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}