Freecodecamp: [ベータ版]自己閉鎖型JSXタグについて学ぶ

チャレンジ名

セルフクロージングJSXタグについて学ぶ

問題の説明

コメントを削除してタグを閉じ（最初の試行でbrタグが欠落して失敗し、修正されました）、試行が失敗しましたが、アイテムがページにレンダリングされました。

失敗の原因：提供されたJSX要素は、challenge-nodeのIDを持つDOMノードにそのままレンダリングされる必要があります。
このエラーを受け取ったときに、アイテムがプレビューに表示されました。
チャレンジノードIDではなくルートIDでレンダリングされているように見えます。

追加されたコード： ReactDOM.render(JSX, document.getElementById('challenge-node'));
テストに合格し、プレビューで2回レンダリングされるようになりました。

チャレンジは次のように述べています。

コードエディタのエラーを修正して、有効なJSXであり、正常に発生するようにします。 コンテンツを変更しないように注意してください。必要な場所でタグを閉じるだけで済みます。

DOMにアタッチする必要があることについては言及されておらず、改行と水平線を調整するだけでよいことを示しているようです。

解決：
DOMにレンダリングする方向を追加し、現在のプレビューを削除する必要があります。
または、ルートIDではなくチャレンジノードから外れるようにプレビューを調整する必要があります。
または、私が現在考えられない別の解決策があります。

あなたのコード

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