Фильтрация, затем отображение
Часть раздела Основы путешествия по React на Coddy — урок 37 из 42.
Методы массивов можно объединять в цепочки, и filter перед map `renders` только те элементы, которые вам нужны:
const numbers = [1, 2, 3, 4, 5, 6];
{numbers
.filter((n) => n % 2 === 0)
.map((n) => <li key={n}>{n}</li>)}
// отображает: 2, 4, 6filter оставляет элементы, для которых условие истинно; map превращает оставшиеся в элементы. Результаты поиска, непрочитанные сообщения, выполненные задачи. Любая функция «показать только…» в вебе — это именно такая цепочка.
Задание
СреднеПокажите только недорогие товары магазина.
- Внутри
<ul id="cheap-list">сделайте render одного<li>для каждой цены в массиве, которая меньше 10: сначала filter, затем map. - Каждый
<li>показывает цену и использует её в качестве key.
Попробуйте сами
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>
Проверьте себяВ этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела Основы
1Знакомство с React
Что такое React?Ваш первый компонентПравило одного родителяJSX — это не HTMLИтоги: Знакомство с React4Пропсы (Props)
Что такое пропсы?Передача пропсовДва пропсаТот же компонент, новые данныеПроп childrenИтоги: пропсы7Условия и списки
Тернарный рендерингОтображение с помощью &&Рендеринг спискаВажность ключейФильтрация, затем отображениеИтоги: Условия и списки