How to access Context within a Class Component for react native?

Question

I want to use my Context in a class component (MyEventsScreen), but whenever I do so, I get an error saying it is an invalid hooks call.

Here is MyEventsScreen.js (I've simplified it to be brief):

import { useAuthState } from "../contexts/authContext";

export default class MyEventsScreen extends Component {

 render() {
    return (
      <View>
          <Text></Text>
      </View>
}

I have my authContext.js here:

import React from "react";
import { authReducer } from "../reducers/authReducer";

const AuthStateContext = React.createContext();
const AuthDispatchContext = React.createContext();

function AuthProvider({ children }) {
  const [state, dispatch] = React.useReducer(authReducer, {
    isLoading: true,
    isSignout: false,
    userToken: null,
    email: null,
    userID: null,
  });

  return (
    <AuthStateContext.Provider value={state}>
      <AuthDispatchContext.Provider value={dispatch}>
        {children}
      </AuthDispatchContext.Provider>
    </AuthStateContext.Provider>
  );
}

function useAuthState() {
  const context = React.useContext(AuthStateContext);
  if (context === undefined) {
    throw new Error("useAuthState must be used within a AuthProvider");
  }
  return context;
}
function useAuthDispatch() {
  const context = React.useContext(AuthDispatchContext);
  if (context === undefined) {
    throw new Error("useAuthDispatch must be used within a AuthProvider");
  }
  return context;
}

export { AuthProvider, useAuthState, useAuthDispatch };

I have an authReducer.js here:

export const authReducer = (prevState, action) => {
  switch (action.type) {
    case "SIGN_IN":
      return {
        ...prevState,
        email: action.email,
        isSignout: false,
        userToken: action.token,
      };
    default:
      return prevState;
  }
};

Any help would be appreciated!

Shyam · Accepted Answer · 2021-08-29 19:15:48Z

2

For class components you can use the Consumer provided by the context .

export your AuthStateContext

export const AuthStateContext = React.createContext();

In the class component you can use it as

import { useAuthState, AuthStateContext } from "../contexts/authContext";

export default class MyEventsScreen extends Component {
  render() {
    return (
      <AuthStateContext.Consumer>
        {(value) => { // read the context value here 
          return (
            <View>
              <Text></Text>
            </View>
          );
        }}
      </AuthStateContext.Consumer>
    );
  }
}

Reference

Context Consumer

answered Aug 29, 2021 at 19:15

Shyam

5,5071 gold badge15 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user16372363 Over a year ago

Yup, this works perfectly. Out of curiosity, if I wanted to use the context in a ComponentWillMount, how would I do that? The only solution I can currently think of is to add a "refresh" button

Shyam Over a year ago

Avoid using ComponentWillMount it is deprecated . Please use ComponentDidMount and also if you are creating this component from scratch i would suggest you to write it as functional component .

Collectives™ on Stack Overflow

How to access Context within a Class Component for react native?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related