ReactPytanie 23 z 28
Zadanie: licznik 0–20
Najpierw odpowiedz na głos lub w myślach, potem porównaj.
Odpowiedź
Ograniczenie stosuję przy aktualizacji, a wyłączone przyciski pokazują użytkownikowi granice.
JSX
import { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
return <>
<button disabled={count === 0}
onClick={() => setCount(c => Math.max(0, c - 1))}>−</button>
<output aria-live="polite">{count}</output>
<button disabled={count === 20}
onClick={() => setCount(c => Math.min(20, c + 1))}>+</button>
</>;
}Doprecyzowanie: aktualizacja funkcyjna korzysta z poprzedniej wartości, więc dobrze działa także przy kolejkowaniu aktualizacji. Sprawdzam oba krańce i wielokrotne kliknięcia.
Jak poszło? Bądź szczery — „Jeszcze nie” dodaje pytanie do powtórki.
Przećwicz w kodzie
- Licznik 0–20 — samodzielna ocena z listą kontrolną