Converted 8.2 JSX Files to TSX with necessary changes.

08. Advance Hooks & React 19/2. Use Context/1. Without Use/components/Card.jsx → 08. Advance Hooks & React 19/2. Use Context/1. Without Use/components/Card.tsx

@@ -1,8 +1,11 @@
 import { useContext } from "react";
 import { ThemeContext } from "./Theme";
-
 const Card = () => {
-  const { theme, toggleTheme } = useContext(ThemeContext);
+  const context = useContext(ThemeContext);
+  if(!context)
+    throw new Error("useTheme must be provided within a ThemeProvider")
+
+  const{theme,toggleTheme} =context
 
   return (
     <div
@@ -35,4 +38,4 @@ const Card = () => {
   );
 };
 
-export default Card;
+export default Card;

08. Advance Hooks & React 19/2. Use Context/1. Without Use/components/Theme.tsx

@@ -0,0 +1,47 @@
+
+import { createContext, ReactNode, useContext, useState } from "react";
+import Card from "./Card";
+
+type Theme = "light" | "dark"
+
+interface ThemeContextType{
+    theme:Theme;
+    toggleTheme:()=>void;
+}
+
+
+export const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+const ThemeProvider:React.FC<{children:ReactNode}> = ({ children }) => {
+  const [theme, setTheme] = useState<Theme>("light");
+
+  const toggleTheme = () => {
+    setTheme((prevTheme)=>prevTheme === "light" ? "dark" : "light");
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+const Theme = () => {
+  return (
+    <ThemeProvider>
+      <Card />
+    </ThemeProvider>
+  );
+};
+
+
+export const useTheme =():ThemeContextType=>{
+    const context =useContext(ThemeContext)
+    if(!context){
+        throw new Error("useTheme must be provided within a ThemeProvider")
+    }
+
+    return context
+}
+
+export default Theme;

08. Advance Hooks & React 19/2. Use Context/2. With Use/components/Card.jsx → 08. Advance Hooks & React 19/2. Use Context/2. With Use/components/Card.tsx

@@ -1,9 +1,11 @@
 import { use } from "react";
 import { ThemeContext } from "./Theme";
-
 const Card = () => {
-  // Now by using react 19, we don't have to use "useContext" we can replace that with "use"
-  const { theme, toggleTheme } = use(ThemeContext);
+  const context = use(ThemeContext);
+  if(!context)
+    throw new Error("useTheme must be provided within a ThemeProvider")
+
+  const{theme,toggleTheme} =context
 
   return (
     <div
@@ -36,4 +38,4 @@ const Card = () => {
   );
 };
 
-export default Card;
+export default Card;

08. Advance Hooks & React 19/2. Use Context/2. With Use/components/Theme.tsx

@@ -0,0 +1,47 @@
+
+import { createContext, ReactNode, useContext, useState } from "react";
+import Card from "./Card";
+
+type Theme = "light" | "dark"
+
+interface ThemeContextType{
+    theme:Theme;
+    toggleTheme:()=>void;
+}
+
+
+export const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+const ThemeProvider:React.FC<{children:ReactNode}> = ({ children }) => {
+  const [theme, setTheme] = useState<Theme>("light");
+
+  const toggleTheme = () => {
+    setTheme((prevTheme)=>prevTheme === "light" ? "dark" : "light");
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+const Theme = () => {
+  return (
+    <ThemeProvider>
+      <Card />
+    </ThemeProvider>
+  );
+};
+
+
+export const useTheme =():ThemeContextType=>{
+    const context =useContext(ThemeContext)
+    if(!context){
+        throw new Error("useTheme must be provided within a ThemeProvider")
+    }
+
+    return context
+}
+
+export default Theme;