Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

uma duvida sobre JSX

Como corrigir o codigo quando o visual studio alegar que JSX element must have parent element?

2 respostas
solução!

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

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software