React44 / 78

createContext, Provider, useContext

Buat Context dengan createContext(), bungkus pohon komponen dengan <ThemeContext.Provider value={theme}>, lalu konsumsi dengan useContext(ThemeContext).

👀 Contoh dulu

const ThemeContext = createContext("light");
function App() {
  return <ThemeContext.Provider value="dark"><Card /></ThemeContext.Provider>;
}

Hasilnya: Card dan seluruh keturunannya bisa mengakses nilai 'dark'.

💡 Provider menentukan nilai data global yang tersedia di cabang komponen tersebut.

📝 Sekarang giliranmu

Bungkus komponen <Card /> dengan menggunakan ThemeContext.Provider. Berikan nilai properti value dengan string 'dark'.

Preview