freeCodeCamp/curriculum/challenges/ukrainian/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, написаних без батьківського елемента-обгортки, не будуть транспільовані.

Наприклад:

Дійсний JSX:

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

Недійсний JSX:

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

--instructions--

Визначте нову константу JSX, яка відтворює div, що містить такі елементи за порядком:

h1, p та невпорядкований список, який містить три елементи li. До кожного елемента можна додати будь-який текст.

Примітка: якщо ви відтворюєте декілька елементів, їх можна взяти в дужки, але це необов’язково. Також зауважте, що це завдання використовує тег div, щоб обернути всі дочірні елементи в один батьківський елемент. Якщо видалити div, то JSX не буде транспілюватись. Майте це на увазі, оскільки це стосується і повернення елементів JSX у компонентах React.

--hints--

Константа JSX має повернути елемент div.

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