Freecodecamp: [Бета] Подробнее о самозакрывающихся тегах JSX

Название испытания

Узнайте о самозакрывающихся тегах JSX

Описание проблемы

Удалил комментарии и закрыли теги (пропустил тег br при первой попытке не удалось, затем был исправлен), а затем попытка не удалась, но затем элемент отобразился на странице.

Ошибка произошла из-за: предоставленный элемент JSX должен отображаться как есть для узла DOM с идентификатором узла вызова.
При получении этой ошибки элемент был отображен в предварительном просмотре.
Похоже, что он отображается не с идентификатором узла вызова, а вместо корневого идентификатора.

Добавлен код: ReactDOM.render(JSX, document.getElementById('challenge-node'));
Тесты пройдены, и теперь он дважды отображается при предварительном просмотре.

Задача гласит:

Исправьте ошибки в редакторе кода, чтобы он был действительным JSX и успешно переносился. Убедитесь, что вы ничего не меняете в содержимом - вам нужно закрыть теги только там, где они необходимы.

Он не упоминает о необходимости прикрепить его к DOM и, похоже, указывает, что вам нужно только настроить разрыв строки и горизонтальную линию.

Решение:
Необходимо добавить направления для рендеринга в DOM и удалить текущий предварительный просмотр.
Или нужно настроить предварительный просмотр, чтобы он не входил в узел вызова вместо корневого идентификатора.
Или есть другое решение, о котором я пока не могу придумать.

Ваш код

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