Условие
В JSX компонент обязан возвращать один корневой элемент. Часто для этого добавляют пустой div, но он попадает в DOM и может сломать flex/grid-вёрстку. Фрагменты группируют несколько элементов без лишнего узла. В App.js исправьте BookMeta и GenreList: уберите ненужные обёртки. Сверяйтесь с вкладкой «Результат».
Что нужно сделать
- В карточке книги уберите лишнюю обёртку - сгруппируйте заголовок и абзацы без лишнего узла в DOM.
- В списке жанров для каждой группы с ключом используйте фрагмент, который принимает key.
- Данные не меняйте: книга Марсианин и три жанра - как во вкладке «Результат».
Подсказка для новичка
Пишите код под комментарием // >>> Пишите код здесь <<<. Короткая запись фрагмента удобна без атрибутов; в списке с key нужна полная форма. Смотрите «Дополнительную информацию» и вкладку «Результат».
Стартовый код
Допишите решение в редакторе слева, сверьте с вкладкой «Результат» и нажмите Проверить. Кнопка «Помощник» подставит решение по шагам.
Вот так должно получиться
Книга и жанры без лишних обёрток
Как пользоваться IDE
- Предпросмотр — как выглядит ваша страница.
- Результат — какой итог должен получиться.
- Описание задачи — полное условие и справка.
- Задание — краткие шаги 1–2–3 снизу.
- Помощник — подсказки по шагам.
- Черновик — ссылка на ваш код.
- Сброс кода — стартовый шаблон.
Свойства этой задачи
- Фрагмент - группирует несколько JSX-узлов без лишнего DOM-элемента.
<> ... </>- короткая запись фрагмента (в BookMeta).React.Fragment+key- полная форма в списке жанров.BookMeta,GenreList,App- функциональные компоненты.Array.map(), пропсыtitle/author/year/genres.<h1>,<h2>,<p>,<section>,<span>.className- catalog-app, book-card, genre-list, genre-tag.body,.book-card,.genre-list- CSS превью.
Пишите код только в
App.js.
Ниже - важные понятия по теме задачи.
Стили превью (CSS)
-
html, body-margin: 0,min-height: 100%,background: #ecfeff. -
body-font-family,padding: 16px,box-sizing: border-box. -
#root,.catalog-app-max-width: 420px,margin: 0 auto. -
.catalog-app h1- заголовок «Каталог книг». -
.book-card-display: flex,flex-direction: column, gap, padding, border, border-radius, белый фон; прямые детиh2/pстилизуются селекторами.book-card > h2,.book-card > p. -
.genre-list- flex-wrap с gap; у.genre-tag- «таблетка» (padding, border-radius, фон).
Оболочка превью (HTML, не редактируется)
<!DOCTYPE html>,<html lang="ru">,<meta charset="UTF-8" />,<div id="root">.- Монтирование функционального
App.
Зачем нужны фрагменты
JSX требует один корневой элемент. Лишний
div
попадает в DOM и может нарушить сетку flex/grid. Фрагмент решает это: React группирует узлы, а браузер не видит обёртку.
Сокращённая запись
<> ... </>
- самый короткий способ. Импорт не нужен: React понимает синтаксис автоматически.
В BookMeta замените обёртку div.book-meta на короткий фрагмент.
Полная форма с key
В
map()
каждой группе нужен уникальный
key.
Сокращённый фрагмент атрибуты не принимает - используйте
<React.Fragment key={genre.id}>
вместо лишнего div.genre-item.
Коротко:
BookMeta → <> → GenreList → React.Fragment + key → «Проверить».