Como corrigir o codigo quando o visual studio alegar que JSX element must have parent element?
Como corrigir o codigo quando o visual studio alegar que JSX element must have parent element?
Oi, Luca, tudo bem?
Acredito que você criou uma função e ele está retornando para mais de uma entidade. Você precisa utilizar fragment
, ele vai permitir que você retorne mais de um elemento na sua função. Chama o Fragment
dentro da importação
e utiliza o componente dentro do retorno.
import React, {Fragment} from 'react';
class Columns extends React.Component {
render() {
return (
<Fragment>
<td>Hello</td>
<td>World</td>
</Fragment> );
}
}
Você também pode utiliza a sintaxe reduzida dele, somente com <>
import React, {Fragment} from 'react';
class Columns extends React.Component {
render() {
return (
<>
<td>Hello</td>
<td>World</td>
</> );
}
}
Se ficou alguma dúvida é só falar!
Bom dia Luca,
Verifique se alguma função render do seu código está tentando renderizar 2 elementos como abaixo (perceba que existem 2 section no return):
render() {
return (
<section className="card-nota">
<header className="card-nota_cabecalho">
<h3 className="card-nota_titulo">{this.props.titulo}</h3>
</header>
<p className="card-nota_texto">{this.props.texto}</p>
</section>
<section className="card-nota">
<header className="card-nota_cabecalho">
<h3 className="card-nota_titulo">{this.props.titulo}</h3>
</header>
<p className="card-nota_texto">{this.props.texto}</p>
</section>
);
}
O método render retorna somente um elemento, se quisessemos corrigir o exemplo acima precisaríamos colocar as duas sections dentro de um único elemento como uma div por exemplo:
render() {
return (
<div>
<section className="card-nota">
<header className="card-nota_cabecalho">
<h3 className="card-nota_titulo">{this.props.titulo}</h3>
</header>
<p className="card-nota_texto">{this.props.texto}</p>
</section>
<section className="card-nota">
<header className="card-nota_cabecalho">
<h3 className="card-nota_titulo">{this.props.titulo}</h3>
</header>
<p className="card-nota_texto">{this.props.texto}</p>
</section>
</div>
);
}
Dê uma olhada no seu código e veja se é o que está acontencendo.
Abraços