From c925fec6db26889ac391d1c8cd072b67e40c2b49 Mon Sep 17 00:00:00 2001
From: SaishJ <saishjagtap0003@gmail.com>
Date: Mon, 12 Sep 2022 20:02:51 +0530
Subject: [PATCH] :wrench: Context

Context
---
 README.md                    |  4 +++-
 src/App.js                   | 13 +++++++++----
 src/components/ComponentA.js | 14 ++++++++++++++
 src/components/ComponentB.js | 20 ++++++++++++++++++++
 src/components/ComponentC.js | 22 ++++++++++++++++++++++
 src/components/useContext.js | 13 +++++++++++++
 6 files changed, 81 insertions(+), 5 deletions(-)
 create mode 100644 src/components/ComponentA.js
 create mode 100644 src/components/ComponentB.js
 create mode 100644 src/components/ComponentC.js
 create mode 100644 src/components/useContext.js

diff --git a/README.md b/README.md
index a562925..8f4d455 100644
--- a/README.md
+++ b/README.md
@@ -239,4 +239,6 @@ const UpdatedComponent = (OriginalComponent) => {
 export default UpdatedComponent;
 ```
 
-### [Render Peops]()
+### [Render Peops](https://github.com/SaishJ/React-JS-Beginner-to-Advanced/commit/d60d9bec7747e75247a97d22406520cbac48fa0a)
+
+### [Context]()
diff --git a/src/App.js b/src/App.js
index 6ee78fd..b68b8cf 100644
--- a/src/App.js
+++ b/src/App.js
@@ -29,20 +29,25 @@ import HoverCounter from "./components/HoverCounter";
 import Increment from "./components/Increment";
 import ClickCounterTwo from "./components/ClickCounterTwo";
 import HoverCounterTwo from "./components/HoverCounterTwo";
+import { UserProvider } from "./components/useContext";
+import ComponentA from "./components/ComponentA";
 
 function App() {
   return (
     <div className="App">
-      <Increment
+      <UserProvider value="Saish">
+        <ComponentA />
+      </UserProvider>
+      {/* <Increment
         render={(count, incrementCount) => (
           <ClickCounterTwo count={count} incrementCount={incrementCount} />
         )}
-      />
-      <Increment
+      /> */}
+      {/* <Increment
         render={(count, incrementCount) => (
           <HoverCounterTwo count={count} incrementCount={incrementCount} />
         )}
-      />
+      /> */}
       {/* <ClickCounter name="Saish" /> */}
       {/* <HoverCounter name="Pratik" /> */}
       {/* <ErrorBoundary>
diff --git a/src/components/ComponentA.js b/src/components/ComponentA.js
new file mode 100644
index 0000000..1defbb0
--- /dev/null
+++ b/src/components/ComponentA.js
@@ -0,0 +1,14 @@
+import React, { Component } from "react";
+import ComponentB from "./ComponentB";
+
+class ComponentA extends Component {
+  render() {
+    return (
+      <div>
+        <ComponentB />
+      </div>
+    );
+  }
+}
+
+export default ComponentA;
diff --git a/src/components/ComponentB.js b/src/components/ComponentB.js
new file mode 100644
index 0000000..4066fa3
--- /dev/null
+++ b/src/components/ComponentB.js
@@ -0,0 +1,20 @@
+import React, { Component } from "react";
+import ComponentC from "./ComponentC";
+import UserContext from "./useContext";
+
+class ComponentB extends Component {
+  static contextType = UserContext;
+
+  render() {
+    return (
+      <div>
+        <h1>Component B context {this.context}</h1>
+        <ComponentC />
+      </div>
+    );
+  }
+}
+
+export default ComponentB;
+
+// Context Type
diff --git a/src/components/ComponentC.js b/src/components/ComponentC.js
new file mode 100644
index 0000000..9e08cf5
--- /dev/null
+++ b/src/components/ComponentC.js
@@ -0,0 +1,22 @@
+import React, { Component } from "react";
+import { UserConsumer } from "./useContext";
+
+class ComponentC extends Component {
+  render() {
+    return (
+      <div>
+        <UserConsumer>
+          {(userName) => {
+            return (
+              <div>
+                <h1>Hello {userName}</h1>
+              </div>
+            );
+          }}
+        </UserConsumer>
+      </div>
+    );
+  }
+}
+
+export default ComponentC;
diff --git a/src/components/useContext.js b/src/components/useContext.js
new file mode 100644
index 0000000..714eaa5
--- /dev/null
+++ b/src/components/useContext.js
@@ -0,0 +1,13 @@
+import React from "react";
+
+const UserContext = React.createContext();
+
+const UserProvider = UserContext.Provider;
+const UserConsumer = UserContext.Consumer;
+
+export { UserProvider, UserConsumer };
+export default UserContext;
+
+/*
+Context provides a way to pass data through the component tree without having to pass props down manuallly at every level. 
+*/