Итоги

В этом уроке вы узнали, что:

• map() превращает массив данных в массив элементов, а React показывает массив в фигурных скобках элемент за элементом: {bands.map((band) => <li key={band.id}>{band.name}</li>)}. Так же это работает и для компонентов: <BandCard key={band.id} band={band} />.
• Каждому элементу списка нужен ключ: уникальный в списке и одинаковый для одного и того же элемента, чтобы React мог различать элементы, когда список меняется. Берите его из данных (band.id), а не из позиции в массиве. Ключ ставится на элемент, который возвращает map(), и компонент не получает его в пропсах. Без ключей консоль предупреждает: Each child in a list should have a unique "key" prop.
• Что покажет список, решается перед return: filter() выбирает часть элементов, sort() ставит их в другом порядке. sort() меняет сам массив, поэтому сортируйте копию: [...bands].sort(…). Компонент не меняет данные, которые получает.
• if нельзя поставить в фигурные скобки, но можно перед return. Ранний возврат сначала разбирает особый случай: if (bands.length === 0) { return <p>Групп пока нет.</p>; }. Компонент, которому нечего показывать, возвращает null.
• Условный оператор условие ? a : b даёт a, если условие истинно, и b, если нет. Это выражение, поэтому его можно поставить в JSX: для текста, элемента или атрибута (className={band.day === "Пятница" ? "card friday" : "card saturday"}).
• условие && элемент даёт элемент или ничего: для false, true, null и undefined React ничего не показывает. Но числа он показывает, а 0 && … даёт 0, поэтому сравнивайте: likes > 0 && ….

В следующем уроке, «Мини-проект: Книга рецептов», вы соберёте компоненты, пропсы, списки и условия в собственное приложение — книгу рецептов.

Но сначала немного практики: список билетов фестиваля. Билеты лежат в App.jsx, а остальное за вами.