JSX, que significa JavaScript XML, é uma extensão de sintaxe para o React que permite aos desenvolvedores escrever código semelhante ao HTML em seus arquivos JavaScript.
Ao trabalhar com JSX, os iniciantes geralmente encontram um erro comum que diz: “JSX expressions must have one parent element”. Esse erro ocorre quando vários elementos são retornados em uma única expressão sem serem agrupados em um elemento principal.
Esse erro também é muito semelhante ao erro “Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>?”.
Neste artigo, você aprenderá as diferentes soluções que pode usar para evitar esse obstáculo comum ao trabalhar com o React.
O que causa o erro “JSX expressions must have one parent element”
No JSX, há uma regra que afirma que você deve sempre retornar um único elemento. Essa regra se aplica ao React, o que significa que cada componente só pode retornar um único elemento raiz.
Isso ocorre porque, quando você renderiza um componente, o React cria uma árvore DOM virtual correspondente ao HTML que é renderizado na página. Se houver vários elementos-raiz no JSX, o React não saberá como lidar com eles, o que resultará no 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 <>…</>?”
Por exemplo, se você tentar renderizar o seguinte código JSX:
function App() {
return (
<h1>Hello, world!</h1>
<p>This is a paragraph.</p>
)
}Você receberá o erro “JSX expressions must have one parent element”:
Ou o erro “Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>?”:
Isso ocorre porque dois elementos raiz <h1> e <p> são retornados.
O JSX opera de forma semelhante a uma função, pois as funções não podem retornar vários valores (a menos que estejam incluídas em uma array, que é considerada um único valor).
function myFunc() {
return value1;
return value2;
}A segunda instrução de retorno na função de renderização é inacessível porque a primeira instrução de retorno sempre será executada, impossibilitando que a segunda seja executada.
3 maneiras de corrigir o erro “JSX expressions must have one parent element”
Há três maneiras principais de corrigir esse erro, que são as seguintes:
- Usando um Div Wrapper
- Usando um fragmento (<> e </>)
- Usando o componente React.Fragment
1. Envolva todos os elementos com um Div Wrapper
Uma das soluções mais diretas para o erro “JSX expressions must have one parent element” é envolver os vários elementos JSX em um único elemento principal (parent), como um <div>.
Fazendo isso, você pode agrupar e renderizar os elementos como uma única unidade. Por exemplo, considere o componente abaixo:
function App() {
return (
<div>
<h1>Hello, world!</h1>
<p>This is a paragraph.</p>
</div>
)
}Neste exemplo, os elementos <h1> e <p> são agrupados em um elemento <div>, que serve como elemento pai.
2. Envolva todos os elementos com um fragmento
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 <>…</>?” é usar um fragmento JSX.
Um Fragmento é um recurso interno do React que permite que você agrupe uma lista de “children” sem adicionar nodes extras ao DOM. Você pode usar um Fragmento para agrupar vários elementos em um único elemento principal sem adicionar um node DOM extra ao HTML renderizado. Por exemplo, aqui está um componente:
function App() {
return (
<>
<h1>Hello, world!</h1>
<p>This is a paragraph.</p>
</>
)
}Neste exemplo, um fragmento JSX (<> e </>) é usado para envolver os vários elementos. Esse fragmento atua como um elemento principal.
3. Envolva todos os elementos com React.Fragment
Por fim, outra maneira de corrigir o erro “JSX expressions must have one parent element” é usar o componente React.Fragment em vez de um elemento regular.
Isso funciona de forma semelhante ao uso de um fragmento JSX, mas é um pouco mais explícito e pode ser útil se você quiser dar ao seu elemento principal uma chave específica ou outros adereços. Por exemplo, aqui está um componente:
function App() {
return (
<React.Fragment>
<h1>Hello, world!</h1>
<p>This is a paragraph.</p>
</React.Fragment>
)
}Neste exemplo, o componente React.Fragment é usado em vez de um componente normal para servir como elemento principal. Ele envolve vários elementos dentro das tags, o que permite que você agrupe os elementos sem adicionar um nó extra ao HTML renderizado.
O componente React.Fragment exigirá que você importe o React. Ele também permite que você adicione props e também className, style e id ao próprio fragmento, o que é útil quando você deseja aplicar estilos ou outros atributos ao grupo de elementos dentro do fragmento.
Como corrigir o erro “JSX expressions must have one parent element” em condicionais
Quando você trabalha com instruções condicionais usando os operadores ternários no React, é 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 <>…</>?”.
Isso acontece quando vários elementos são retornados de dentro de uma instrução condicional. Nesse caso, o React não será capaz de renderizá-los corretamente e isso resultará em um dos erros.
function App() {
return (
<div>
{condition ? (
<h1>Heading 1</h1>
<p>Paragraph 1</p>
) : (
<h2>Heading 2</h2>
<p>Paragraph 2</p>
)}
</div>
)
}Você pode corrigir esse erro com qualquer um dos três métodos explicados neste artigo. De preferência, você pode usar o fragmento React (<> e </>) ou o elemento <div>.
function App() {
return (
<div>
{condition ? (
<>
<h1>Heading 1</h1>
<p>Paragraph 1</p>
</>
) : (
<>
<h2>Heading 2</h2>
<p>Paragraph 2</p>
</>
)
}
</div>
)
}Resumo
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 <>…</>?” é um obstáculo comum que os iniciantes enfrentam ao aprender React.
Usar um wrapper <div> é a solução mais fácil, mas pode adicionar divs desnecessários ao DOM. Os fragmentos fornecem uma solução mais limpa sem adicionar nodes extras ao DOM.
Agora é sua vez: Já enfrentou esse problema? Como você o superou? Existe alguma solução que você aplicou e que não mencionamos no artigo? Compartilhe conosco nos comentários!
