Todo listesi

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.

Örnek çözümü göster

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;

Kendini test et

Liste anahtarı

Liste çiziminde her öğeye ____ özniteliği verilir.

Cevabı göster

Liste çiziminde her öğeye key özniteliği verilir.

key olarak en iyi değer nedir?
- Benzersiz id
- Dizi indeksi
- Rastgele sayı
- Öğe metni
Cevabı göster

Benzersiz id — Benzersiz id en iyi anahtardır.
Liste adımlarını eşleştir

map

Dolaşır
key={id}

Benzersiz
toggle

done ters
spread

Kopya + değişiklik

Sıradaki ders: Filtre ve özet

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler