Freecodecamp: [Beta] Saiba mais sobre tags JSX de fechamento automático

Nome do Desafio

Saiba mais sobre tags JSX de fechamento automático

descrição do problema

Removeu os comentários e fechou as tags (falhou a tag br na primeira tentativa e depois foi corrigida) e, em seguida, a tentativa falhou, mas o item renderizado na página.

A falha foi de: O elemento JSX fornecido deve ser renderizado como está para o nó DOM com id de nó de desafio.
O item foi renderizado na visualização ao receber este erro.
Parece que ele está sendo renderizado não com o ID do nó de desafio, mas com o ID da raiz.

Código adicionado: ReactDOM.render(JSX, document.getElementById('challenge-node'));
Os testes foram aprovados e agora ele é renderizado duas vezes na visualização.

O desafio afirma:

Corrija os erros no editor de código para que seja JSX válido e seja transpilado com êxito. Certifique-se de não alterar nada do conteúdo - você só precisa fechar as tags onde elas são necessárias.

Ele não menciona a necessidade de anexá-lo ao DOM e parece indicar que você só precisa ajustar a quebra de linha e a linha horizontal.

Solução:
É necessário adicionar instruções para renderizar no DOM e remover a visualização atual.
Ou precisa ajustar a visualização para fora do nó de desafio em vez do id de raiz
Ou há outra solução na qual não consigo pensar no momento.

Seu código

Failed:
const JSX = (
  <div>
    <h2>Welcome to React!</h2><br />
    <p>Be sure to close all tags!</p>
    <hr />
  </div>
);

Passed: 
const JSX = (
  <div>
    <h2>Welcome to React!</h2><br />
    <p>Be sure to close all tags!</p>
    <hr />
  </div>
);
ReactDOM.render(JSX, document.getElementById('challenge-node'));