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

id, title, challengeType, isRequired, forumTopicId, localeTitle

id	title	challengeType	isRequired	forumTopicId	localeTitle
5a24bbe0dba28a8d3cbd4c5d	Create a Complex JSX Element	6	false	301382	Создание сложного элемента JSX

Description

Последняя задача была простым примером JSX, но JSX также может представлять собой более сложный HTML. Одна важная вещь, которую нужно знать о вложенном JSX, состоит в том, что она должна возвращать один элемент. Этот один родительский элемент будет обертывать все остальные уровни вложенных элементов. Например, несколько элементов JSX, написанных как братья и сестры без родительского элемента оболочки, не будут препровождаться. Вот пример: Действительный JSX:

<DIV>
<p> Пункт 1 </ p>
<p> Пункт второй </ p>
<p> Пункт третий </ p>
</ DIV>

Недопустимый JSX:

<p> Пункт 1 </ p>
<p> Пункт второй </ p>
<p> Пункт третий </ p>

Instructions

Определите новую константу JSX которая отображает div который содержит следующие элементы в порядке: список h1 , p и неупорядоченный список, содержащий три элемента li . Вы можете включать любой текст, который вы хотите в каждом элементе. Примечание. При рендеринге нескольких элементов, подобных этому, их можно скопировать в круглые скобки, но это не требуется строго. Также обратите внимание, что эта проблема использует тег div для обертывания всех дочерних элементов в одном родительском элементе. Если вы удалите div , JSX больше не будет переполняться. Помните об этом, так как он будет применяться и при возврате элементов JSX в компонентах React.

Tests

tests:
  - text: The constant <code>JSX</code> should return a <code>div</code> element.
    testString: assert(JSX.type === 'div');
  - text: The <code>div</code> should contain an <code>h1</code> tag as the first element.
    testString: assert(JSX.props.children[0].type === 'h1');
  - text: The <code>div</code> should contain a <code>p</code> tag as the second element.
    testString: assert(JSX.props.children[1].type === 'p');
  - text: The <code>div</code> should contain a <code>ul</code> tag as the third element.
    testString: assert(JSX.props.children[2].type === 'ul');
  - text: The <code>ul</code> should contain three <code>li</code> elements.
    testString: assert(JSX.props.children.filter(ele => ele.type === 'ul')[0].props.children.filter(ele => ele.type === 'li').length === 3);

Challenge Seed

// write your code here

After Tests

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

Solution

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