freeCodeCamp/curriculum/challenges/arabic/03-front-end-development-libraries/react/create-a-complex-jsx-element.md

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5a24bbe0dba28a8d3cbd4c5d	إنشاء عنصر JSX معقد	6	301382	create-a-complex-jsx-element

--description--

التحدي الأخير كان المثال بسيطاً على JSX، ولكن JSX يمكن أن يمثل HTML أكثر تعقيداً أيضاً.

أحد الأشياء المهمة التي يجب أن تعلمها عن تداخل JSX هو أنه يجب أن ينتج عنصر واحد.

هذا العنصر الأصلي الواحد سيغلف جميع المستويات الأخرى للعناصر المتداخلة.

وعلى سبيل المثال، فإن العديد من عناصر JSX المكتوبة كأخوة لا يوجد فيها عنصر تغليف أصلي لن يتم نقلها.

إليك مثال:

Valid JSX:

<div>
  <p>Paragraph One</p>
  <p>Paragraph Two</p>
  <p>Paragraph Three</p>
</div>

Invalid JSX:

<p>Paragraph One</p>
<p>Paragraph Two</p>
<p>Paragraph Three</p>

--instructions--

أعلن ثابت جديد JSX يجعل div يحتوي على العناصر التالية بالترتيب:

h1، وp، وقائمة غير مرتبة (unordered list) تحتوي على ثلاث عناصر li. يمكنك تضمين أي نص تريده داخل كل عنصر.

ملاحظة: عند تقديم عناصر متعددة مثل، يمكنك إلصاقها كلها بين قوسين، لكنها ليست مطلوبة بدقة. لاحظ أيضًا أن هذا التحدي يستخدم علامة div لإغلاق جميع العناصر الفرعية داخل عنصر أحد الوالدين. إذا أزالت div، فلن يتم نقل JSX. ضع هذا في اعتباره، لأنه سيطبق أيضا عند أنتاج عناصر JSX في مكونات React.

--hints--

يجب أن يعيد عنصر div الثابت JSX.

assert(JSX.type === 'div');

يجب أن يحتوي div على علامة h1 كالعنصر الأول.

assert(JSX.props.children[0].type === 'h1');

يجب أن يحتوي div على علامة p كالعنصر الثاني.

assert(JSX.props.children[1].type === 'p');

يجب أن يحتوي div على علامة ul كعنصر ثالث.

assert(JSX.props.children[2].type === 'ul');

يجب أن يحتوي ul على ثلاث عناصر li.

assert(
  JSX.props.children
    .filter((ele) => ele.type === 'ul')[0]
    .props.children.filter((ele) => ele.type === 'li').length === 3
);

--seed--

--after-user-code--

ReactDOM.render(JSX, document.getElementById('root'))

--seed-contents--

--solutions--

const JSX = (
<div>
  <h1>Hello JSX!</h1>
  <p>Some info</p>
  <ul>
    <li>An item</li>
    <li>Another item</li>
    <li>A third item</li>
  </ul>
</div>);