Latihan 1: Custom Hooks — React

Latihan 1 dari materi Custom Hooks di React — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Buat custom hook useToggle sendiri, lalu pakai di App. useState sudah tersedia, gak perlu import.

Di luar App, tulis function useToggle(initial = false). Di dalamnya simpan satu boolean dengan useState(initial), buat toggle yang membalik nilainya dengan setValue((v) => !v), lalu kembalikan [value, toggle].
Di App, panggil const [isOn, toggle] = useToggle(true) supaya mulai dari ON.
Render <p id="status"> berisi ON kalau isOn true dan OFF kalau false, lalu <button id="toggle" onClick={toggle}>Toggle</button>.

Yang dinilai:

Saat pertama tampil, #status berbunyi persis ON.
Setelah #toggle diklik sekali, #status berbunyi OFF.
Setelah #toggle diklik dua kali, #status kembali ON.
Kodenya punya function useToggle atau useToggle = (deklarasi function atau arrow function, keduanya boleh).
App mengambil nilainya dari hook itu: = useToggle(.

Hint

Custom hook cuma function biasa yang namanya diawali use dan boleh memanggil useState di dalamnya. Ia mengembalikan nilainya sekarang dan satu function untuk membaliknya.
function useToggle(initial = false) { const [value, setValue] = useState(initial); const toggle = () => setValue((v) => !v); return [value, toggle] }. Nilai awal yang kamu kirim menentukan bunyi pertama.
Di App: const [isOn, toggle] = useToggle(true); lalu <p id="status">{isOn ? "ON" : "OFF"}</p> dan <button id="toggle" onClick={toggle}>Toggle</button>

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Custom Hooks — React

Hint

Memperbarui Aplikasi