Using the New Context API with Higher Order Components in React

1class A extends React.Component {
2  state = {
3    value: 'Some value'
4  };
5 
6  render() {
7    return(
8      <B value={this.state.value} />
9    );
10  }
11}
12 
13const B = (props) => (
14  <C value={props.value} />
15);
16 
17const C = (props) => (
18  <div>{props.value}</div>
19);

In this example, we are sending value from the parent component A through its child component B, to be used only inside the child component C. Component B doesn’t care about the value prop, and it’s only passing down that prop to be used in component C.

This is something commonly known as Prop Drilling – passing props down from an upper level to a lower level in the components tree, while components in between don’t care about these props.

1// AuthUser.jsx
2import React, { Component } from 'react';
3import { authenticateUser } from './Auth';
4 
5// initialize Context with default value
6export const AuthCtx = React.createContext(null);
7 
8const AuthenticateUser = (ComposedComponent) => {
9  class Authenticate extends Component {
10    state = {
11      userAuth: null
12    };
13 
14    async componentDidMount() {
15      try {
16        // make API request to authenticate user on the backend
17        const { status, data } = await authenticateUser();
18        if (status === 200) {
19          this.setState({ userAuth: data });
20        }
21      } catch (err) {
22        // handle error
23      }
24    }
25 
26    render() {
27      const { userAuth } = this.state;
28      return(
29        <AuthCtx.Provider value={userAuth}>
30          <ComposedComponent />
31        </AuthCtx.Provider>
32      );
33    }
34  }
35  return Authenticate;
36};
37 
38export default AuthenticateUser;

1// NavBar.jsx
2import React from 'react';
3import { Link } from 'react-router-dom';
4import AuthenticateUser, { AuthCtx } from './AuthUser';
5 
6const NavBar = () => (
7  <div className="nav-bar">
8    <AuthCtx.Consumer>
9      {userAuth =>
10        !userAuth ? (
11          <Link to="/login">Login</Link>
12        ) : (
13          <Link to="/profile">Profile</Link>
14          <Link to="/logout">Logout</Link>
15          ...
16        )
17      }
18    </AuthCtx.Consumer>
19  </div>
20);
21 
22export default AuthenticateUser(NavBar);