#3 what is the proplem?

المشكلة ان الـ dark mode يتم تطبيقة فقط على الصفحة الحاليه فقط !!

#3.1 How to manage state globally

الطريقة الشائعة هى عمل ملف يتم تخزين بداخله الـ data التى سوف تتغير فى المستقبل

context : عبارة عن ملف يتم تخزين بداخله مجموعة من الـ data ؛ وهذه الـ data سوف تتغير

👈 كمرحلة أولى: ظهور الـ data فى الموقع

1context > ThemeContext.js [To create context, you must Import createContext and initialize it:]

  import { createContext, useReducer } from "react";
  const ThemeContexttt = createContext();
 
 const initialData = { myName: "ali hassan" };
 const reducer = () => {}
  
  export function ThemeProvider({ children }) {
    const [firstState, dispatch] = useReducer(reducer, initialData);
  
    return (
       <ThemeContexttt.Provider value={{ ...firstState}}>
        {children}
       </ThemeContexttt.Provider>
    );
  }
  
  export default ThemeContexttt;

2index.js [Wrap child components in the Context Provider and supply the state value.]

 import {ThemeProvider} from "./context/ThemeContext";
  
 <ThemeProvider>
    <App />
  </ThemeProvider>

3In order to use the Context in a child component, we need to access it using the useContext Hook.

 import {useContext } from "react";
 import ThemeContext from "../context/ThemeContext";
  
 const Component = () => {
 const {myName} = useContext(ThemeContext);

 return (
  <main>
    <h2>{myName}</h2>
  </main>
 );
 };
  
 export default Component;

👈 كمرحلة ثانية: تغيير الـ data فى الصفحة

1context > ThemeContext.js [To create context, you must Import createContext and initialize it:]

  import { createContext, useReducer } from "react";
  const ThemeContexttt = createContext();
 
 const initialData = { myName: "ali hassan" };
 const reducer = (firstState, action) => {
  switch (action.type) {
    case "CHANGE_NAME":
      return { ...firstState, myName: action.newValue };
    default:
      return firstState;
  }}
   
  
  export function ThemeProvider({ children }) {
    const [firstState, dispatch] = useReducer(reducer, initialData);
    const changeName = (newName) => {
      dispatch({ type: "CHANGE_NAME", newValue: newName });
    };
  
  
    return (
       <ThemeContexttt.Provider value={{ ...firstState, changeName }}>
        {children}
       </ThemeContexttt.Provider>
    );
  }
  
  export default ThemeContexttt;

2index.js [Wrap child components in the Context Provider and supply the state value.]

 import {ThemeProvider} from "./context/ThemeContext";
  
 <ThemeProvider>
    <App />
  </ThemeProvider>

3In order to use the Context in a child component, we need to access it using the useContext Hook.

 import {useContext } from "react";
 import ThemeContext from "../context/ThemeContext";
  
 const Component = () => {
 const {myName} = useContext(ThemeContext);

 return (
  <main>
    <h2>{myName}</h2>
    <button
      onClick={() => changeName("ELRAYEK")}
    >
      Change name
    </button>


  </main>
 );
 };
  
 export default Component;

useContext Hook - w3schools

Download files

#3.2 Task solution

Download files