Latihan 1: Form Lanjutan — React

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

Lengkapi form yang memeriksa namanya saat dikirim. Kode awal sudah punya state name, error, success dan function handleSubmit yang lengkap (dengan e.preventDefault() dan pesan Nama wajib diisi). Biarkan semuanya. Kamu cukup menulis JSX-nya, menggantikan return null:

  1. <form onSubmit={handleSubmit}> sebagai pembungkus.
  2. Di dalamnya, <input id="name" value={name} onChange={(e) => setName(e.target.value)} />.
  3. {error && <span id="error">{error}</span>}.
  4. {success && <span id="success">Berhasil!</span>}.
  5. <button type="submit">Kirim</button>. Atribut type="submit" wajib ditulis, karena tombolnya dicari lewat button[type="submit"].

Yang dicek, berurutan dalam satu sesi:

  1. Kirim dengan kolom kosong: #error berbunyi persis Nama wajib diisi.
  2. Ketik Budi: #success belum boleh ada.
  3. Kirim: #success berbunyi persis Berhasil!, dan #error hilang.
  4. Kosongkan kolomnya: #success tetap Berhasil!, karena mengetik belum mengirim.
  5. Kirim dengan kolom kosong: #success hilang.

Halamannya juga harus punya <form> dan #name, dan kodenya memuat onSubmit, preventDefault(, useState(, Nama wajib diisi, dan Berhasil!.

Hint