Latihan 1 dari materi Error Boundaries di React — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Tulis error boundary sungguhan untuk contoh di pelajaran. Kode awal sudah punya Profil, yang membaca user.nama, dan App dengan state user, saldo <p id="saldo">Saldo: Rp 250.000</p>, dan tombol #rusak (Rusakkan data) yang mengubah user jadi null. Tanpa boundary, klik tombolnya membuat Profil error dan seluruh tampilan hilang.
Profil, tulis class ErrorBoundary extends React.Component dengan state = { hasError: false }.static getDerivedStateFromError(error) yang mengembalikan { hasError: true }.render(), kalau this.state.hasError true, kembalikan <div id="fallback">Terjadi error</div>. Kalau gak, kembalikan this.props.children.App, bungkus <Profil user={user} /> saja dengan <ErrorBoundary>. Saldo dan tombolnya tetap di luar.Tulis React.Component lengkap: Component saja gak tersedia di editor. Baris import boleh ditulis seperti di proyek sungguhan, tapi gak wajib.
Yang dicek:
#profil berbunyi persis Halo, Budi, dan #fallback belum ada.#rusak diklik, #fallback berbunyi persis Terjadi error, dan #saldo tetap berbunyi Saldo: Rp 250.000.class ErrorBoundary extends React.Component, static getDerivedStateFromError(, dan <ErrorBoundary> tepat di sekeliling <Profil.
