5. Class-based Components & Context

README.md

@@ -46,3 +46,10 @@
 2. use the `componentDidUpdate()` lifecycle to handle side effects and replace `useEffect()`
 3. use `componentDidMount()` to simulate a case where the data comes from an http request
 4. use `componentWillUnmount()` in `User.js`
+
+## 5. Class-based Components & Context
+
+1. add a new `users-context.js`
+2. use context with the first approach: the context `Consumer` component by adding `<UsersContext.Consumer>` in `UserFinder.js`
+3. or use `static contextType` in `UserFinder.js`
+4. now access the context with `this.context.users` instead of `DUMMY_USERS`

src/App.js

@@ -1,10 +1,21 @@
 import UserFinder from './components/UserFinder';
+import UsersContext from './store/users-context';
+
+const DUMMY_USERS = [
+  { id: 'u1', name: 'Max' },
+  { id: 'u2', name: 'Manuel' },
+  { id: 'u3', name: 'Julie' }
+];
 
 function App() {
+  const usersContext = {
+    users: DUMMY_USERS
+  };
+
   return (
-    <div>
+    <UsersContext.Provider value={usersContext}>
       <UserFinder />
-    </div>
+    </UsersContext.Provider>
   );
 }
 

src/components/UserFinder.js

@@ -2,14 +2,11 @@ import { Fragment, useState, useEffect, Component } from 'react';
 
 import Users from './Users';
 import classes from './UserFinder.module.css';
-
-const DUMMY_USERS = [
-  { id: 'u1', name: 'Max' },
-  { id: 'u2', name: 'Manuel' },
-  { id: 'u3', name: 'Julie' }
-];
+import UsersContext from '../store/users-context';
 
 class UserFinder extends Component {
+  static contextType = UsersContext;
+
   constructor() {
     super();
     this.state = {
@@ -20,13 +17,13 @@ class UserFinder extends Component {
 
   componentDidMount() {
     // Send http request...
-    this.setState({ filteredUsers: DUMMY_USERS });
+    this.setState({ filteredUsers: this.context.users });
   }
 
   componentDidUpdate(prevProps, prevState) {
     if (prevState.searchTerm !== this.state.searchTerm) {
       this.setState({
-        filteredUsers: DUMMY_USERS.filter(user =>
+        filteredUsers: this.context.users.filter(user =>
           user.name.includes(this.state.searchTerm)
         )
       });

src/store/users-context.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const UsersContext = React.createContext({
+  users: []
+});
+
+export default UsersContext;