Filtre ve özet
- React kursu
- Başlangıç
- Ders 80/84
- 5 dk
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.
Başlangıç kodu
import { useState } from "react";
// TodoApp bileşenini buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Türetilmiş veri
Görünen todo'lar ____ ile hesaplanır.Görünen todo'lar filter ile hesaplanır.Açıklama: filter ile görünen todo'lar seçilir.
2 Türetilmiş veriyi nerede hesaplamalı?
- LocalStorage'ta
- Render gövdesinde Doğru cevap
- useRef'te
- useEffect içinde
Açıklama: Render gövdesinde hesaplanır.
3 Filtre seçeneklerini eşleştir
| Kavram | Anlamı |
|---|---|
all |
Hepsi |
active |
Yapılacak |
done |
Tamamlanan |
remaining |
Kalan |