React
Filtre ve özet
Aktif/tamamlanan filtreleri ve kalan sayıyı eklersin.
Filtre ve özet
Son ders TodoApp'i birleştirip filtre ve özet ekleyecek. filter state'i: "all", "active", "done". Gösterilecek todo'lar bu filtreye göre hesaplanır.
Türetilmiş veri (derived state) useMemo olmadan da hesaplanabilir: her render'da const visible = todos.filter(t => ...). React bu hesabı zaten hızlı yapar; aşırı durumlarda useMemo kullanılır.
Özet: const remaining = todos.filter(t => !t.done).length. Ekranda <p>{ '{ remaining }' } kalan</p> gösterilir.
Üç parça birleşiyor
TodoApp, TodoForm ve TodoList'i birleştirir. handleAdd fonksiyonu yeni todo ekler; handleToggle done'ı tersine çevirir.
visible her render'da filtreye göre hesaplanır ve TodoList'e todos={ '{ visible }' } olarak verilir. Böylece liste yalnızca görünür öğeleri çizer.
Özet için remaining ayrıca hesaplanır ve ekrana yazılır. Bu, üç dersin birleştiği yerdir; tek dosyada tüm parçalar birlikte çalışır.
Uygulama TodoApp tam hali
Aşağıdaki iskeleti tamamla. TodoApp bileşeni yaz. todos, text, filter için üç state tanımla. visible'ı filtre ile hesapla. remaining'i hesapla. <main> içinde <h1>Todo</h1>, <p>{ '{ remaining }' } kalan</p> ve <ul> içinde visible.map çiz. Dışa aktar.
Örnek çözümü göster
import { useState } from "react";
function TodoApp() {
const [todos, setTodos] = useState([]);
const [text, setText] = useState("");
const [filter, setFilter] = useState("all");
const visible = filter === "all" ? todos : todos.filter((t) => filter === "done" ? t.done : !t.done);
const remaining = todos.filter((t) => !t.done).length;
return (
<main>
<h1>Todo</h1>
<p>{remaining} kalan</p>
<ul>
{visible.map((todo) => (
<li key={todo.id}>{todo.text}</li>
))}
</ul>
</main>
);
}
export default TodoApp;
Kendini test et
-
Türetilmiş veri
Görünen todo'lar ____ ile hesaplanır.
Cevabı göster
Görünen todo'lar filter ile hesaplanır.
-
Türetilmiş veriyi nerede hesaplamalı?
- LocalStorage'ta
- Render gövdesinde
- useRef'te
- useEffect içinde
Cevabı göster
Render gövdesinde — Render gövdesinde hesaplanır.
-
Filtre seçeneklerini eşleştir
- all
- Hepsi
- active
- Yapılacak
- done
- Tamamlanan
- remaining
- Kalan
Sıradaki ders: Meydan okuma: Hava durumu kartı
