Latihan 1: Lifting State Up — React

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

Bikin penghitung yang angkanya dipegang App, bukan anak-anaknya. Kode awal sudah punya Display, yang menampilkan prop value di <span id="display">, dan Controls, yang punya tombol <button id="add"> dan memanggil prop onIncrement waktu diklik. Biarkan keduanya.

  1. Di App, simpan state count dengan nilai awal 0: const [count, setCount] = useState(0).
  2. Di dalam <div>, render <Display value={count} />.
  3. Di bawahnya, render <Controls onIncrement={...} /> dengan function yang menaikkan count satu, misalnya () => setCount((c) => c + 1).

Yang dicek:

  1. Sebelum diklik, #display berisi 0.
  2. Sesudah 1 klik #add, #display berisi 1.
  3. Sesudah 2 klik #add, #display berisi 2.
  4. Kodenya memakai <Display value= dan <Controls onIncrement=.

useState sudah tersedia di editor. Baris import boleh ditulis seperti di proyek sungguhan, tapi gak wajib.

Hint