---
id: 5a24c314108439a4d4036161
title: Дізнайтеся про теги Self-Closing JSX
challengeType: 6
forumTopicId: 301396
dashedName: learn-about-self-closing-jsx-tags
---

# --description--

До цього часу ви бачили, як JSX відрізняється від HTML ключовим чином за допомогою `className` vs. `class`для визначення класів HTML.

Іншою важливою відмінністю JSX від HTML є уявлення про теги, які самі закриваються.

У HTML майже всі елементи мають початковий та кінцевий тег: `<div></div>`; кінцевий тег завжди має скісну риску перед назвою тегу, який ви закриваєте. Проте, в HTML є особливі випадки, так звані " теги що самі закриваються", або теги, які не вимагають відкриття та закриття тегів, перш ніж інший тег може початися.

Наприклад, тег розриву рядка можна записати у вигляді`<br>` або як `<br />`, але ніколи не слід писати як `<br></br>`, оскільки він не містить змісту.

У JSX правила трохи відрізняються. Кожен елемент JSX може бути записаний з тегом, який сам закривається і будь-який елемент повинен бути закритий. Тег розриву рядка, наприклад, завжди повинен бути записаний як`<br />`, щоб бути дійсним JSX, який може змінюватися. `<div>`, з іншого боку, може бути записаний як `<div />` або `<div></div>`. Різниця в тому, що в першій версії синтаксису немає можливості включити що-небудь до` <div /> `. У наступних завданнях ви побачите, що цей синтаксис корисний при передачі компонентів React.

# --instructions--

Виправляйте помилки в редакторі коду так, щоб вони були дійсними JSX і успішно транслювалися. Переконайтеся, що ви не міняєте вміст - вам потрібно тільки закрити теги там, де вони потрібні.

# --hints--

Константа `JSX` повинна повертатися як `div`.

```js
assert.strictEqual(JSX.type, 'div');
```

`div` повинен містити в собі такі елементи `br`.

```js
assert(Enzyme.shallow(JSX).find('br').length === 1);
```

`div` повинен містити в собі такі елементи як `hr`.

```js
assert(Enzyme.shallow(JSX).find('hr').length === 1);
```

# --seed--

## --after-user-code--

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

## --seed-contents--

```jsx
const JSX = (
  <div>
    <h2>Welcome to React!</h2> <br >
    <p>Be sure to close all tags!</p>
    <hr >
  </div>
);
```

# --solutions--

```jsx
const JSX = (
<div>
  <h2>Welcome to React!</h2> <br />
  <p>Be sure to close all tags!</p>
  <hr />
</div>
);
```
