Context API

Dp20703 · Dp20703 · commit 55d5a315ebe6 · 2024-07-08T19:26:51.000+05:30
diff --git a/Helper/Context.js b/Helper/Context.js
@@ -0,0 +1,13 @@
+"use client"
+import React, { createContext } from 'react'
+export const MyContext = createContext()
+const Context = ({ children }) => {
+    const username = "Code with dp"
+    return (
+        <div><MyContext.Provider value={username} >
+            {children}
+        </MyContext.Provider></div>
+    )
+}
+
+export default Context
diff --git a/app/Components/Header.js b/app/Components/Header.js
@@ -0,0 +1,10 @@
+import React, { useContext } from 'react'
+import { MyContext } from '@/Helper/Context'
+const Header = () => {
+    const username=useContext(MyContext)
+  return (
+    <div><h1>The name of this webiste is {username}</h1></div>
+  )
+}
+
+export default Header
diff --git a/app/[id]/page.js b/app/[id]/page.js
diff --git a/app/globals.css b/app/globals.css
@@ -3,5 +3,5 @@
 @tailwind utilities;
 
 body{
-    padding: 50px;
+    padding: 5px;
 }
diff --git a/app/layout.js b/app/layout.js
@@ -1,3 +1,4 @@
+import MyContext from "@/Helper/Context";
 import "./globals.css";
 export const metadata = {
   title: "React Advanced",
@@ -7,7 +8,9 @@ export const metadata = {
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
-      <body suppressContentEditableWarning>{children}</body>
+      <body suppressContentEditableWarning>
+        <MyContext>{children}</MyContext>
+      </body>
     </html>
   );
 }
diff --git a/app/page.js b/app/page.js
@@ -1,31 +1,14 @@
 "use client"
-import axios from 'axios'
-import Link from 'next/link'
-import React, { useEffect, useState } from 'react'
-
+import React, { useContext } from 'react'
+import { MyContext } from '@/Helper/Context'
+import Header from './Components/Header'
 const page = () => {
-
-  const [users, setusers] = useState([])
-
-  const getUsers = async () => {
-    const { data } = await axios.get("https://jsonplaceholder.typicode.com/users")
-    setusers(data)
-    // console.log(data)
-  }
-
-  useEffect(() => {
-    getUsers()
-  }, [])
-
+  const user = useContext(MyContext)
   return (
     <>
-      <button onClick={getUsers} className='text-white font-bold px-4 py-2 rounded bg-green-600'>Get Data</button>
-      <div className='bg-slate-100 p-8 mt-5'>
-        <ul>{users.map((e,id) => {
-          return <li key={id} >{e.username} ---<Link href={`${e.id}`}>Explore</Link></li>
-        })}</ul>
-      </div>
-    </>
+      <Header />
+      <div className='text-black'>{user}
+      </div></>
   )
 }
 

Original file line number	Diff line number	Diff line change
`@@ -3,5 +3,5 @@`
`3`	`3`	`@tailwind utilities;`
`4`	`4`
`5`	`5`	`body{`
`6`		`- padding: 50px;`
	`6`	`+ padding: 5px;`
`7`	`7`	`}`