Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що робить `<React.Fragment>`?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**`React.Fragment`** - це **спеціальний компонент-обгортка** в React,
який дозволяє **групувати кілька елементів** без додавання зайвого вузла в DOM.

---

### Проблема, яку вирішує `React.Fragment`

У React кожен компонент повинен повертати **один кореневий елемент**:

```javascript
function App() {
  return (
    <h1>Hello</h1>
    <p>How are you?</p>
  );
}
```

Помилка:

> "Adjacent JSX elements must be wrapped in an enclosing tag."

Щоб це виправити, можна обгорнути елементи в `<div>`, але це створить **зайвий HTML-елемент**:

```javascript
function App() {
  return (
    <div>
      <h1>Hello</h1>
      <p>How are you?</p>
    </div>
  );
}
```

У DOM з'явиться:

```javascript
<div>
  <h1>Hello</h1>
  <p>How are you?</p>
</div>
```

Іноді цей `<div>` взагалі не потрібен (наприклад, у таблиці, списку, сітці).

---

### Рішення: `<React.Fragment>`

```javascript
function App() {
  return (
    <React.Fragment>
      <h1>Hello</h1>
      <p>How are you?</p>
    </React.Fragment>
  );
}
```

Тепер React **групує елементи логічно**,
але **не додає обгортку в DOM**.

У результаті DOM виглядає так:

```javascript
<h1>Hello</h1>
<p>How are you?</p>
```

---

### Короткий запис: `<>...</>`

Те саме, тільки коротше:

```javascript
function App() {
  return (
    <>
      <h1>Hello</h1>
      <p>How are you?</p>
    </>
  );
}
```

Це **синтаксичний цукор** для `<React.Fragment>`.

---

### Коли це особливо корисно

1. **У таблицях і списках:**

```javascript
  function TableRow() {
    return (
      <>
        <td>Name</td>
        <td>Age</td>
      </>
    );
  }
  ```
Без `Fragment` довелося б використовувати зайвий `<tr>` або `<div>`, що ламає таблицю.
2. **При поверненні кількох елементів у** `map`**:**

```javascript
  const items = ["apple", "banana", "orange"];

return items.map((fruit, i) => (
    <React.Fragment key={i}>
      <h3>{fruit}</h3>
      <hr />
    </React.Fragment>
  ));
  ```
Тут `key` можна задати тільки з `React.Fragment`,
а короткий синтаксис `<>...</>` ключі не підтримує.

---

### Підсумок

| Що робить | Пояснення |
|---|---|
| Групує кілька JSX-елементів | Без додавання зайвого елемента в DOM |
| Дозволяє уникнути непотрібних `<div>` | Особливо в таблицях і списках |
| Може мати `key` | Тільки повна форма `<React.Fragment key={...}>` |
| Не відображається в DOM | Це "невидима" обгортка |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати310 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.