Using the Context API React.createContext()

Author: Ch-sriram

README.md

@@ -103,3 +103,4 @@ In this repository, I've implemented (or implementing) all the concepts related
     3. `Refs` in functional components using `useRef()` hook: [Commit Details](https://github.com/Ch-sriram/react/commit/9088c3ac9007c341cbc85b816ac57ec500ad6afa)
 14. Context API in React
     1. Problems with `prop` chaining — Why use the concept of Context? [Commit Details](https://github.com/Ch-sriram/react/commit/be6a373389a4942902f261a988f46aefb5601122)
+    2. Using the Context API using `React.createContext()`: [Commit Details]()

react-examples/src/components/Cockpit/Cockpit.component.jsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import CockpitStyleClasses from './Cockpit-style.module.css';
+import AuthContext from '../../context/auth/auth.context';
 
 const Cockpit = props => {
   const togglePersonsBtnRef = useRef(null);
@@ -27,6 +28,13 @@ const Cockpit = props => {
     classes.push(CockpitStyleClasses.bold);
   }
 
+  /**
+   * We will wrap the required button inside the 
+   * <AuthContext/> context component where we return the
+   * button by passing in the function with the `context` 
+   * variable.
+   */
+
   return (
     <div className={CockpitStyleClasses.Cockpit}>
       <h1>{props.title}</h1>
@@ -39,9 +47,16 @@ const Cockpit = props => {
       >
         Toggle Persons
       </button>
-      <button onClick={props.login}>{"Log In/Out"}</button>
+      <AuthContext.Consumer>
+        {(context) => <button onClick={context.login}>{"Log In/Out"}</button>}
+      </AuthContext.Consumer>
     </div>
   );
 };
 
 export default React.memo(Cockpit);
+
+/**
+ * Because of this, we don't need to send the `loginHandler()`
+ * as a prop to the <Cockpit/> component.
+ */

react-examples/src/components/Persons/Person/Person.component.jsx

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import PersonStyleClasses from './Person-style.module.css';
 import Aux from '../../../hoc/Auxiliary/Auxiliary.hoc';
 import withClass from '../../../hoc/WithClass/withClass.closureHOC';
+import AuthContext from '../../../context/auth/auth.context';
 
 class Person extends PureComponent {
   inputElementRef = React.createRef();
@@ -14,19 +15,28 @@ class Person extends PureComponent {
     this.inputElementRef.current.focus();
   }
 
+  /**
+   * Wherever we need to use the context object, we have to 
+   * always consume it, so we'll consume it here as shown below.
+   * 
+   * Here, we can see that the content wrapped inside 
+   * <AuthContext.Consumer/> is executing a function
+   * which takes in an argument, which is the `context` 
+   * variable, through which, we can directly access the 
+   * context variable or the context function.
+   */
+  
   render() {
     console.log("[Person.jsx] rendering...");
     return (
       <Aux>
-        {
-          this.props.isAuth ?
-            <p>Authenticated</p> :
-            <p>Please Log In</p>
-        }
+        <AuthContext.Consumer>
+          {context => context.authenticated ? <p>Authenticated</p> : <p>Please Log In</p>}
+        </AuthContext.Consumer>
         <p onClick={this.props.click}>
           I'm {this.props.name} and I'm {this.props.age} years old!
         </p>
-        <input 
+        <input
           ref={this.inputElementRef}
           type="text"
           onChange={this.props.changed}

react-examples/src/components/Persons/Persons.component.jsx

@@ -18,6 +18,16 @@ class Persons extends PureComponent {
     console.log("[Persons.js] componentWillUnmount");
   }
 
+  /**
+   * We need not consume the context that we wrapped the 
+   * <Persons/> component with, in here. We can directly 
+   * consume it inside the <Person/> component.
+   * 
+   * And also, we don't need to send in the `isAuth` prop
+   * to the <Person/> component, and also, we need not take
+   * in `isAuthenticated` prop from the <App/> component.
+   */
+
   render() {
     console.log("[Persons.jsx] rendering...");
     return this.props.persons.map((person, index) => {
@@ -28,7 +38,6 @@ class Persons extends PureComponent {
           name={person.name}
           age={person.age}
           changed={(event) => this.props.nameChanged(event, person.id)}
-          isAuth={this.props.isAuthenticated}
         />
       );
     });

react-examples/src/containers/App.js

@@ -7,42 +7,11 @@ import Cockpit from '../components/Cockpit/Cockpit.component';
 // import WithClass from '../hoc/WithClass/withClass.hoc';
 import withClass from '../hoc/WithClass/withClass.closureHOC';
 import Aux from '../hoc/Auxiliary/Auxiliary.hoc';
+import AuthContext from '../context/auth/auth.context';
 
 // Required Styles
 import AppStyleClasses from './App.module.css';
 
-/**
- * Assume that, for the <Person/> component, we want to add 
- * in a dummy authentication whose handler is written inside
- * the <App/> component, and it is invoked from the <Cockpit/>
- * component. The <Cockpit/> component receives the 
- * loginHandler() function's reference as a `prop` from App
- * component.
- * 
- * Now, the loginHandler() event handler, which is invoked from
- * the <Cockpit/> component, will simply change some state 
- * object, let's say we have a new state variable called 
- * `authenticated`, which is initially false.
- * 
- * Inside the loginHandler() function, we can call setState and
- * set `authenticated` to true, and this loginHandler()'s 
- * reference is sent to the <Cockpit/> component as a property
- * called `login`.
- * 
- * Now, we also want to get the information whether every 
- * <Person/> component is authenticated or not. And since the
- * state of the authentication status, which is `authenticated`
- * is stored at <App/> component, and also, since the App
- * component only has access to the <Persons/> component, we 
- * can send in the state value of `authenticated` as a property
- * to the <Persons/> component (let's say `isAuthenticated` 
- * prop). Inside the <Persons/> component, we can pass the 
- * `isAuthenticated` property to each <Person/> as (say) 
- * `isAuth` property. And inside the <Person/> component, we
- * can print information on each <Person/> whether it is 
- * "Authenticated" or "Not Authenticated".
- */
-
 class App extends Component {
   constructor(props) {
     super(props);
@@ -115,17 +84,49 @@ class App extends Component {
     console.log("[App.js] rendering...");
     let persons = null;
 
+    /**
+     * Because of context object, we need not send information
+     * on `state.authenticated` as a prop.
+     */
+
     if (this.state.showPersons) {
       persons = (
         <Persons
           persons={this.state.persons}
           clicked={this.deletePersonHandler}
           nameChanged={this.nameChangedHandler}
-          isAuthenticated={this.state.authenticated}
         />
       );
     }
 
+    /**
+     * Now, the imported <AuthContext/> component should wrap 
+     * all the components that would need to use the context
+     * variables/functions in our app.
+     * 
+     * In this case, the <Person/> and the <Cockpit/> 
+     * components need to use the context variable/functions,
+     * and so, we'll wrap that part of the returned JSX from
+     * this App component, inside <AuthContext.Provider/>
+     * component. Because we're providing the context to the
+     * components that are wrapped inside the <AuthContext/>
+     * component.
+     * 
+     * The <AuthContext.Provider/> component, takes in a 
+     * `value` prop, in which we pass in the new values to the 
+     * context, depending on what we're trying to provide the
+     * context for. If the `value` prop isn't described, then
+     * the default context's definition will be taken as the 
+     * value of the context.
+     * 
+     * In this case, both <Cockpit/> and the <Persons/> 
+     * components can access the context object's variables or
+     * functions. In case of <Persons/> component, since 
+     * <Person/> is the child component of <Persons/> 
+     * component, we can also use the context directly inside
+     * the <Person/> component, which is what we want.
+     */
+
     return (
       <Aux>
         <button
@@ -137,20 +138,32 @@ class App extends Component {
         >
           {this.state.showCockpit ? "Remove Cockpit" : "Show Cockpit"}
         </button>
-        {
-          this.state.showCockpit ?   
+        <AuthContext.Provider value={{
+          authenticated: this.state.authenticated,
+          login: this.loginHandler
+        }}>
+          {this.state.showCockpit ? (
             <Cockpit
               title={this.props.title}
               showPersons={this.state.showPersons}
               personsLength={this.state.persons.length}
               clicked={this.togglePersonsHandler}
               login={this.loginHandler}
-            /> : null
-        }
-        {persons}
+            />
+          ) : null}
+          {persons}
+        </AuthContext.Provider>
       </Aux>
     );
   }
 }
 
 export default withClass(App, AppStyleClasses.App);
+
+/**
+ * The one thing that doesn't change when using the Context API
+ * is that, we still maintain the info to be passed, inside the
+ * state of the component, because, react will only re-render
+ * when the state/props in some component down the component 
+ * tree changes.
+ */

react-examples/src/context/auth/auth.context.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+/**
+ * `React.createContext()` allows us to initialize our 
+ * respective context with a default value, because the context
+ * object in the end, is just a globally available object, 
+ * which we decide whether to use, or not. Now, this context
+ * object can be passed between react components w/o using the
+ * `props` and therefore now, there will be no prop-chaining.
+ */
+const authContext = React.createContext({
+  authenticate: false,
+  login: () => {}
+});
+
+export default authContext;