Bağımsız Durum

Coddy'nin React Journey'sinin Temeller bölümünün bir parçası — ders 26 / 42.

İki şeyi hatırlamanız mı gerekiyor? useState'i iki kez çağırın. Her çağrı tamamen bağımsız bir durum parçası oluşturur:

const [cats, setCats] = useState(0);
const [dogs, setDogs] = useState(0);

cats değerini güncellemek bileşeni yeniden işler (re-render eder), ancak dogs değerini korur. Her state'in kendi setter fonksiyonu vardır ve bunları karıştırmak en yaygın acemi hatasıdır: setCats(dogs + 1) sorunsuz bir şekilde derlenir ama yine de yanlıştır.

Görev

Orta

Barınağın kabul panosunu çalıştırın: birbirine müdahale etmeyen iki sayaç.

Her ikisi de 0 ile başlayan cats ve dogs adında iki durum (state) ekleyin.
Bunları id="cats" ve id="dogs" içinde gösterin.
id="add-cat" butonu bir kedi ekler; id="add-dog" bir köpek ekler.

Kendin dene

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>