Latihan 2: Event Handler — React

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

Starter-nya sudah punya komponen App dengan const [text, setText] = useState("") dan <div> pembungkus. Biarkan keduanya. text adalah nilai yang ditampilkan, dan setText(nilaiBaru) menggantinya.

Di dalam <div>, tulis <input id="nama" /> dengan onChange yang menyimpan isi kolom: onChange={(e) => setText(e.target.value)}.
Di bawahnya, tulis <p id="output">{text}</p>.

Yang dicek:

ada #nama dan #output
kodenya memakai onChange
setelah Budi diketik di #nama, #output berisi persis Budi
setelah itu Sinta diketik, dan #output ikut berisi persis Sinta

Hint

Teks yang diketik cuma bertahan di layar kalau disimpan di state. Starter-nya sudah menyiapkan text dan setText.
Pasang onChange di <input id="nama">. Handler-nya menerima e, dan isi kolomnya ada di e.target.value. Simpan dengan setText, lalu tampilkan {text} di <p id="output">.
<input id="nama" onChange={(e) => setText(e.target.value)} /> lalu <p id="output">{text}</p>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 2: Event Handler — React

Hint

Memperbarui Aplikasi