🔧 Context

Context

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]()

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>

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;

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

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;

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. 
+*/