Latihan 2: Error Boundaries — React

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

Tulis pola tampilan error boundary dengan state biasa: satu state memilih tampilan normal atau tampilan error.

Kode awal sudah punya const [hasError, setHasError] = useState(false) dan dua tombol, <button id="trigger">Trigger Error</button> dan <button id="reset">Reset</button>. Biarkan begitu.
Ganti komentar di atas tombol dengan conditional. Kalau hasError true, tampilkan <div id="error-ui">Oops! Terjadi kesalahan.</div>. Kalau false, tampilkan <div id="normal-ui">Semua berjalan normal</div>.
Tampilkan salah satunya saja, jangan dua-duanya sekaligus.

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

Yang dicek:

Sebelum diklik, #normal-ui berisi persis Semua berjalan normal.
Sesudah #trigger diklik, #error-ui berisi persis Oops! Terjadi kesalahan. (dengan titik), dan #normal-ui gak ada lagi.
Sesudah itu #reset diklik, #error-ui hilang.
Dari awal lagi, sesudah #reset diklik, #normal-ui berisi Semua berjalan normal.

Hint

Satu state boolean memilih satu dari dua tampilan. Ini conditional rendering biasa, sama seperti render() di ErrorBoundary yang memilih fallback atau children.
Pakai operator ternary di dalam JSX: {hasError ? (tampilan error) : (tampilan normal)}. Tombol trigger dan reset yang sudah ada yang mengubah hasError.
{hasError ? <div id="error-ui">Oops! Terjadi kesalahan.</div> : <div id="normal-ui">Semua berjalan normal</div>}

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 2: Error Boundaries — React

Hint

Memperbarui Aplikasi