Freecodecamp: [Beta] Erfahren Sie mehr über selbstschließende JSX-Tags

Name der Herausforderung

Erfahren Sie mehr über selbstschließende JSX-Tags

Fehlerbeschreibung

Die Kommentare wurden entfernt und die Tags geschlossen (das br-Tag beim ersten Versuch fehlgeschlagen, dann behoben) und der Versuch fehlgeschlagen, aber dann das auf der Seite gerenderte Element.

Fehler war von: Das bereitgestellte JSX-Element sollte so wie es ist auf dem DOM-Knoten mit der ID des Herausforderungsknotens gerendert werden.
Das Element wurde in der Vorschau gerendert, als dieser Fehler angezeigt wurde.
Es scheint, dass es nicht mit der Challenge-Node-ID, sondern mit der Root-ID gerendert wird.

Code hinzugefügt: ReactDOM.render(JSX, document.getElementById('challenge-node'));
Tests bestanden und jetzt wird es zweimal in der Vorschau gerendert.

Die Herausforderung lautet:

Beheben Sie die Fehler im Code-Editor so, dass JSX gültig ist und erfolgreich transpiliert wird. Stellen Sie sicher, dass Sie keinen Inhalt ändern - Sie müssen Tags nur dort schließen, wo sie benötigt werden.

Es wird nicht erwähnt, dass es an das DOM angehängt werden muss, und es scheint anzuzeigen, dass Sie nur den Zeilenumbruch und die horizontale Linie anpassen müssen.

Lösung:
Sie müssen Anweisungen zum Rendern zum DOM hinzufügen und die aktuelle Vorschau entfernen.
Oder Sie müssen die Vorschau so anpassen, dass sie außerhalb des Challenge-Knotens anstelle der Root-ID liegt.
Oder es gibt eine andere Lösung, an die ich derzeit nicht denken kann.

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