Freecodecamp: [Bêta] En savoir plus sur les balises JSX à fermeture automatique

Nom du défi

En savoir plus sur les balises JSX à fermeture automatique

Description du problème

Suppression des commentaires et fermeture des balises (la balise br manquée lors de la première tentative a échoué, puis corrigée), puis la tentative a échoué, mais l'élément rendu sur la page.

L'échec provenait de: l'élément JSX fourni doit être rendu tel quel sur le nœud DOM avec l'ID de challenge-node.
L'élément a été rendu sur l'aperçu lors de la réception de cette erreur.
Apparemment, il n'est pas rendu avec l'ID du nœud de défi, mais plutôt avec l'ID racine.

Code ajouté: ReactDOM.render(JSX, document.getElementById('challenge-node'));
Les tests ont réussi et maintenant il est rendu deux fois sur l'aperçu.

Le défi déclare:

Corrigez les erreurs dans l'éditeur de code afin qu'il soit valide JSX et transpile avec succès. Assurez-vous de ne modifier aucun contenu - il vous suffit de fermer les balises là où elles sont nécessaires.

Il ne mentionne pas la nécessité de le joindre au DOM et semble indiquer que vous devez uniquement ajuster le saut de ligne et la ligne horizontale.

Solution:
Besoin d'ajouter des directions pour effectuer le rendu dans le DOM et supprimer l'aperçu actuel.
Ou vous devez ajuster l'aperçu pour qu'il soit hors du nœud de défi au lieu de l'ID racine.
Ou il y a une autre solution à laquelle je ne peux actuellement pas penser.

Votre code

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'));