Como resolver erro Adjacent JSX elements must be wrapped in an enclosing tag

Neste artigo você aprenderá a como resolver o erro Adjacent JSX elements must be wrapped in an enclosing tag do React JS!

Fala programador(a), beleza? Bora aprender mais sobre os erros do React!

React é uma biblioteca popular para construir interfaces de usuário. Ele usa JSX, uma extensão da sintaxe do JavaScript que permite escrever HTML em seu JavaScript.

No entanto, ao usar JSX, você pode encontrar erros que podem não ser imediatamente óbvios se estiver acostumado a escrever HTML puro.

Um desses erros é “Adjacent JSX elements must be wrapped in an enclosing tag”.

Neste artigo, vamos entender o que significa esse erro e como resolvê-lo.

import React from 'react';

const MyComponent = () => {
  return (
    <p>Primeiro parágrafo</p>
    <p>Segundo parágrafo</p>
  );
}

Se você tentar executar o código acima, o React exibirá um erro: “Adjacent JSX elements must be wrapped in an enclosing tag”.

Isso ocorre porque o JSX exige que um componente retorne um único elemento pai.

No exemplo acima, estamos tentando retornar dois elementos <p> lado a lado (ou “adjacentes”) sem um elemento pai os envolvendo.

Envolvendo Elementos Adjacentes em uma Tag de Encerramento

A maneira mais simples de resolver esse erro é envolver seus elementos adjacentes em uma tag de encerramento.

A escolha da tag depende do que faz sentido para o layout e a semântica do seu código.

Muitas vezes, uma tag <div> é usada para esse propósito.

import React from 'react';

const MyComponent = () => {
  return (
    <div>
      <p>Primeiro parágrafo</p>
      <p>Segundo parágrafo</p>
    </div>
  );
}

No exemplo acima, os elementos <p> agora estão envoltos em uma tag <div>, e o erro não ocorrerá mais.

Usando Fragmentos do React

Porém, a utilização de <div> nem sempre é desejada, pois isso pode afetar o layout do seu código HTML, principalmente quando se trabalha com CSS. Para tais situações, o React fornece um recurso chamado Fragmentos.

import React from 'react';

const MyComponent = () => {
  return (
    <>
      <p>Primeiro parágrafo</p>
      <p>Segundo parágrafo</p>
    </>
  );
}

No código acima, usamos a sintaxe de Fragmento do React <>...</> para envolver os elementos <p>.

Os fragmentos permitem que você retorne vários elementos sem adicionar um nó extra ao DOM.

Uso de Array

Há outra maneira de retornar vários elementos adjacentes em um componente do React: retornar um array de elementos.

import React from 'react';

const MyComponent = () => {
  return [
    <p key="1">Primeiro parágrafo</p>,
    <p key="2">Segundo parágrafo</p>
  ];
}

Ao retornar um array de elementos, você precisa adicionar um atributo key exclusivo a cada elemento. Este é um requisito do React para otimizar a renderização de listas.

Importância da Semântica e Performance

Agora que já entendemos como resolver o erro “Adjacent JSX elements must be wrapped in an enclosing tag”, é importante também destacar o motivo pelo qual o React exige essa estrutura de um único elemento pai.

Semântica do HTML

No desenvolvimento web, é crucial manter a semântica do HTML. Cada elemento HTML tem um significado específico.

A tag <div>, por exemplo, é um contêiner genérico sem nenhum significado semântico. Por outro lado, tags como <article>, <section>, <nav> e <header> fornecem informações importantes sobre o conteúdo do seu website para os motores de busca e para as tecnologias assistivas, como leitores de tela.

Ao optar pelo uso de um Fragmento do React ou um array para resolver o erro de elementos JSX adjacentes, você evita adicionar ao DOM nós desnecessários que poderiam interferir na semântica do seu HTML.

Performance

Adicionar nós desnecessários ao DOM pode ter um impacto na performance do seu website ou aplicação. O DOM (Document Object Model) é uma representação do seu website que o navegador usa para tornar o HTML em uma página web.

Quanto mais nós no DOM, mais trabalho o navegador precisa fazer, o que pode diminuir a performance do seu site.

O uso de Fragmentos do React ou arrays para envolver elementos adjacentes ajuda a manter a estrutura do DOM o mais enxuta possível, contribuindo para a performance do seu projeto.

Melhores práticas para evitar o erro

Finalmente, é sempre bom lembrar algumas práticas recomendadas para evitar o erro de elementos JSX adjacentes:

Planeje a estrutura do seu componente

Antes de começar a codificar, faça um esboço da estrutura do seu componente. Isso ajudará você a visualizar qual será o elemento pai e como os elementos filho serão organizados.

Revise o seu código

Erros podem passar despercebidos quando estamos focados em desenvolver a lógica do componente. Por isso, reserve um tempo para revisar o seu código. Verifique se todos os elementos JSX têm um único elemento pai.

Use um linter

Ferramentas como o ESLint podem ajudar a detectar esse tipo de erro automaticamente. Elas podem ser configuradas para seguir as regras do React e mostrar um aviso sempre que você tentar retornar elementos JSX adjacentes sem um elemento pai.

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Neste artigo, exploramos o erro comum “Adjacent JSX elements must be wrapped in an enclosing tag” que você pode encontrar ao trabalhar com React e JSX.

Aprendemos que este erro ocorre quando tentamos retornar vários elementos JSX adjacentes sem envolvê-los em um elemento pai, e discutimos várias maneiras de resolver esse problema, incluindo o uso de uma tag de encerramento, Fragmentos do React e retornando um array de elementos.

A melhor solução depende do seu caso de uso específico e das necessidades do seu projeto.

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.