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