Итоги: Условия и списки
Часть раздела Основы путешествия по React на Coddy — урок 38 из 42.
Задание
СреднеИтоги главы: создайте доску задач из данных, используя всё из этой главы.
- Компонент определяет массив
tasks. Внутри<ul id="done-list">отобразите по одному<li>для каждой задачи, которая done: сначалаfilter, затемmap. - Каждый
<li>показываетtextзадачи и использует еёidв качествеkey. - Над списком используйте
&&, чтобы отобразить<span>сid="badge"со значением2 done(сформируйте число изlengthотфильтрованного массива!), но только когда хотя бы одна задача выполнена.
Попробуйте сами
<!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Условия и списки
Тернарный рендерингОтображение с помощью &&Рендеринг спискаВажность ключейФильтрация, затем отображениеИтоги: Условия и списки