Latihan 1: Context API — React

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

Bagikan nilai tema lewat context, lalu tampilkan di komponen Display tanpa props. createContext dan useContext sudah tersedia, gak perlu import.

Di luar komponen, buat const ThemeContext = createContext("light").
Di App, kembalikan <ThemeContext.Provider value="dark"> yang membungkus <Display />.
Di Display, simpan nilai context ke variabel dulu, const theme = useContext(ThemeContext), lalu tampilkan di <p id="theme">{theme}</p>.

Yang dinilai:

Teks #theme persis dark.
Kodenya memakai createContext dan useContext (di kode, bukan di dalam teks atau komentar).
Nilai dari useContext disimpan di variabel const atau let, lalu variabel itu ditampilkan dengan kurung kurawal, misalnya {theme}.
Tag Provider-nya punya atribut value=.

Hint

Context menghindari pengoperan prop berlapis: nilainya disediakan sekali di atas oleh Provider, lalu dibaca langsung di komponen mana pun di bawahnya.
Tiga bagian: const ThemeContext = createContext("light") di luar komponen, Provider dengan value="dark" yang membungkus <Display /> di App, dan useContext(ThemeContext) di dalam Display.
Di Display: const theme = useContext(ThemeContext); return <p id="theme">{theme}</p>. Di App: return <ThemeContext.Provider value="dark"><Display /></ThemeContext.Provider>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Context API — React

Hint

Memperbarui Aplikasi