Todo listesi
- React kursu
- Başlangıç
- Ders 79/84
- 5 dk
Todo'ları map ile gösterip tamamlama durumunu değiştirirsin.
Todo listesi
Bu ders TodoList bileşenini yazacak. todos dizisini .map ile dolaşıp her birini <li key={ '{ todo.id }' }>...</li> olarak çizeceğiz.
key özniteliği React'in listedeki öğeleri eşleştirmesi için şarttır. id gibi benzersiz ve kararlı bir değer kullanılır; dizi indeksi kullanmaktan kaçın.
Her öğenin yanına bir toggle butonu koyarız: done durumunu tersine çevirir. Bu, setTodos ile map kullanılarak yapılır.
Toggle mantığı
Toggle butonu tıklanınca setTodos çağrılır. Fonksiyonel güncelleme ile her todo'yu dolaşırız: tıklanan id ile eşleşen öğenin done alanı tersine çevrilir.
Yazım: setTodos(prev => prev.map(t => t.id === id ? { '{ ...t, done: !t.done }' } : t)). Eşleşmeyen öğeler aynı kalır; eşleşen öğenin done değeri değişir.
Bu desen spread + koşullu deseni olarak bilinir ve React'te listeden tek bir öğeyi güncellemenin en güvenli yoludur. Orijinal diziyi değiştirmek (mutate) yasaktır.
Uygulama TodoList yaz
Aşağıdaki iskeleti tamamla. TodoList bileşeni yaz. ({ '{ todos, onToggle }' }) parametresi alsın. <ul> içinde todos.map(todo => ...) ile her todo için <li key={ '{ todo.id }' }> çiz; içinde <span>{ '{ todo.text }' }</span> ve <button onClick={ '{ () => onToggle(todo.id) }' }>Toggle</button> olsun. Dışa aktar.
Başlangıç kodu
// TodoList bileşenini buraya yazÖrnek çözüm
function TodoList({ todos, onToggle }) {
return (
<ul>
{todos.map((todo) => (
<li key={todo.id}>
<span>{todo.text}</span>
<button onClick={() => onToggle(todo.id)}>Toggle</button>
</li>
))}
</ul>
);
}
export default TodoList;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Liste anahtarı
Liste çiziminde her öğeye ____ özniteliği verilir.Liste çiziminde her öğeye key özniteliği verilir.Açıklama: key özniteliği her öğeye verilir.
2 key olarak en iyi değer nedir?
- Benzersiz id Doğru cevap
- Dizi indeksi
- Rastgele sayı
- Öğe metni
Açıklama: Benzersiz id en iyi anahtardır.
3 Liste adımlarını eşleştir
| Kavram | Anlamı |
|---|---|
map |
Dolaşır |
key={id} |
Benzersiz |
toggle |
done ters |
spread |
Kopya + değişiklik |