quando eu coloco algum elemento fora do form (em baixo) todo o codigo "html" fica com erro e da erro no localhost3000 tambem
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
quando eu coloco algum elemento fora do form (em baixo) todo o codigo "html" fica com erro e da erro no localhost3000 tambem
Fala Diogo, beleza??
Então, sem ver o seu código exatamente fica um pouco complicado de te dizer exatamente o problema, mas creio que seja algo parecido com isso daqui, certo?
function App() {
return (
<form>
...
</form>
<p> um elemento <p> em baixo do elemento <form> </p>
)
}
Caso seja isso, isso é esperado.
O React renderiza o HTML da página com uma técnica chamada JSX baseada em XML. O XML aceita apenas um elemento pai, ou seja, o React herdou isso e aceita apenas um elemento pai por componente.
Felizmente eu tenho a solução para o seu problema!
Para que você consiga fazer isso, você pode:
<div>: function App() {
return (
<div>
<form>
...
</form>
<p> um elemento <p> em baixo do elemento <form> </p>
</div>
)
}
function App() {
return (
<React.Fragment>
<form>
...
</form>
<p> um elemento <p> em baixo do elemento <form> </p>
</React.Fragment>
)
}
Espero que eu tenha conseguido responder a sua dúvida!
Bons estudos!!