Latihan 2: Fetching Data — React

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

Tampilkan daftar user setelah pemuatan tiruan. Kode awal sudah punya dua state, users (mulai []) dan loading (mulai true), plus cabang if (loading) yang menampilkan <p id="status">Memuat...</p>. Biarkan semuanya.

Di dalam useEffect(() => { ... }, []) yang sudah ada, isi datanya: panggil setUsers(["Andi", "Budi", "Citra"]) (boleh juga lewat variabel, seperti hasil fetch: const data = [...]; setUsers(data)), lalu setLoading(false). Jangan jadikan data ini nilai awal useState.
Di dalam <ul id="user-list">, buat satu <li> per nama dengan users.map(...), bukan diketik satu per satu. Kasih tiap <li> sebuah key.

Yang dicek: #user-list ada dan punya minimal 3 <li>, isinya memuat Andi dan Citra, kodenya memakai useState( dan useEffect(, effect-nya memanggil setter, users mulai dari useState([]), dan daftarnya dibuat dengan users.map(.

Hint

Data yang datang belakangan harus masuk lewat setter state. Mengubah variabel biasa gak bikin React render ulang, jadi daftarnya tetap kosong.
Isi state-nya di dalam effect yang jalan sekali: useEffect(() => { setUsers([...]); setLoading(false) }, []). Lalu ubah tiap nama jadi <li> dengan users.map.
useEffect(() => { setUsers(["Andi", "Budi", "Citra"]); setLoading(false) }, []) dan di dalam <ul id="user-list">: {users.map((name) => <li key={name}>{name}</li>)}

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 2: Fetching Data — React

Hint

Memperbarui Aplikasi