Enclosing tag

Beleza Rodrigo? Quando você está trabalhando com JSX, a sintaxe exige que todos os elementos adjacentes sejam envolvidos em um único elemento de nível superior. Isso ocorre porque o JSX retorna apenas um único elemento. Se você tentar retornar múltiplos elementos JSX sem envolvê-los em um contêiner, como uma

Oi, Rodrigo, tudo bem?

Como o colega mencionou na mensagem acima, quando criamos componentes utilizando o React, é necessário que todos os elementos que compõem esse componente estejam envolvidos em uma única tag, como, uma caixa. Isso ocorre, porque na linguagem do React a linguagem JSX que utilizamos, deve ser enviada para a função React.createElement(), responsável por estruturar o elemento na tela do navegador. Essa função espera que você entregue apenas uma coisa por vez. Se você tentar devolver várias coisas sem englobá-los em uma tag principal, o React não vai entender e vai mostrar o erro mencionado.

Agora, por que usar uma div? Bem, a div é a escolha mais comum porque é um elemento neutro que não adiciona nenhuma semântica ou estilo ao HTML. No entanto, você pode usar qualquer elemento que faça sentido para o seu código. Se você não quiser adicionar um elemento extra ao DOM, você pode usar o que é chamado de Fragmento React, que é basicamente uma tag vazia que o React irá ignorar na renderização final. Você pode fazer isso usando <></> ou <React.Fragment></React.Fragment>.

Por exemplo, se você tem dois elementos no nível superior, como este:

function MeuComponente() {
  return (
    <h1>Olá, mundo!</h1>
    <p>Bem-vindo ao React.</p>
  );
}

Você receberá o erro: "Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?". Mas você pode corrigir isso envolvendo os elementos em uma div ou em um Fragmento React, assim:

function MeuComponente() {
  return (
    <div>
      <h1>Olá, mundo!</h1>
      <p>Bem-vindo ao React.</p>
    </div>
  );
}

ou

function MeuComponente() {
  return (
    <>
      <h1>Olá, mundo!</h1>
      <p>Bem-vindo ao React.</p>
    </>
  );
}

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!