Latihan 2: State dengan useState — React

Latihan 2 dari materi State dengan useState di React — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Kode awal sudah punya import { useState } from "react" dan const [active, setActive] = useState(true), biarkan keduanya. Lengkapi isi <div>-nya:

Tambahkan <p id="status"> yang berbunyi Aktif saat active bernilai true, dan Nonaktif saat false. Pakai {active ? "Aktif" : "Nonaktif"}.
Tambahkan <button id="toggle">Toggle</button> yang onClick-nya membalik active lewat setter: setActive(!active).

Yang dicek:

Sebelum diklik, #status berisi persis Aktif.
Sesudah #toggle diklik sekali, #status berisi persis Nonaktif.
Dari awal lagi, sesudah #toggle diklik dua kali, #status kembali berisi Aktif.
Kodenya memanggil setter state, misalnya setActive(...).

Hint

Status aktif atau tidak disimpan di state boolean. Membaliknya berarti menyimpan kebalikan nilai sekarang lewat setter-nya.
Paragrafnya memilih satu dari dua kata dengan ternary berdasarkan active, dan tombolnya memanggil setActive dengan kebalikan active.
<p id="status">{active ? "Aktif" : "Nonaktif"}</p> <button id="toggle" onClick={() => setActive(!active)}>Toggle</button>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 2: State dengan useState — React

Hint

Memperbarui Aplikasi