React Context Rendering Demo

context.jsx

import React from "react";

const MyContext = React.createContext();

const MyProvider = ({ children }) => {
  const [theme, setTheme] = React.useState("light");
  const nextTheme = theme === "light" ? "dark" : "light";

  const value = {
    theme,
    nextTheme,
    toggleTheme: () => {
      setTheme(nextTheme);
    }
  };

  return <MyContext.Provider value={value}>{children}</MyContext.Provider>;
};

function App() {
  return (
    <MyProvider>
      <DirectChild />
    </MyProvider>
  );
}

const DirectChild = () => {
  console.log("DirectChild");

  return (
    <nav>
      <DeeperChild />
    </nav>
  );
};

const DeeperChild = () => {
  console.log("DeeperChild");
  const { nextTheme, toggleTheme } = React.useContext(MyContext);

  return (
    <div>
      <button onClick={toggleTheme}>{nextTheme}</button>
    </div>
  );
};

export default App;