Meydan okuma: Sayaç ve sıfırlama
- React kursu
- Başlangıç
- Ders 83/84
- 6 dk
Artı, eksi ve sıfırla butonlu, alt sınırı olan bir sayacı yazarsın.
Meydan okuma: Sayaç ve sıfırlama
Bu meydan okuma, Counter bileşenini yazmanı istiyor. Üç buton: Artır, Azalt ve Sıfırla. count state'i 0'dan başlasın.
Artır: setCount(c => c + 1). Azalt: setCount(c => c - 1). Sıfırla: setCount(0).
Sıfırın altına düşmeyi engellemek için bir guard ekle: azalt butonunda setCount(c => Math.max(0, c - 1)). Böylece count hiçbir zaman negatif olmaz.
Uygulama Counter guard ile yaz
Aşağıdaki iskeleti tamamla. Counter bileşeni yaz. count state'i 0'dan başlasın. <p>{ '{ count }' }</p> göster. Üç buton ekle: Artır setCount(c => c + 1), Azalt setCount(c => Math.max(0, c - 1)), Sıfırla setCount(0). Dışa aktar.
Başlangıç kodu
import { useState } from "react";
// Counter bileşenini buraya yazÖrnek çözüm
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>{count}</p>
<button onClick={() => setCount((c) => c + 1)}>Artır</button>
<button onClick={() => setCount((c) => Math.max(0, c - 1))}>Azalt</button>
<button onClick={() => setCount(0)}>Sıfırla</button>
</div>
);
}
export default Counter;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Sıfırlama
Sayaç sıfırlamak için ____ çağrılır.Sayaç sıfırlamak için setCount(0) çağrılır.Açıklama: setCount(0) ile sıfırlanır.
2 Sayaç butonlarını eşleştir
| Kavram | Anlamı |
|---|---|
Artır |
c + 1 |
Azalt |
Math.max(0, c-1) |
Sıfırla |
0 |
guard |
Math.max |