Call function of Context in react class component

Question

I have following Code in my Context.js:

import { createContext, useEffect, useReducer } from "react";
import Reducer from "./Reducer";

const INITIAL_STATE = {
  user: JSON.parse(localStorage.getItem("user")) || null,
  isFetching: false,
  error: false,
};

export const Context = createContext(INITIAL_STATE);

export const ContextProvider = ({ children }) => {
  const [state, dispatch] = useReducer(Reducer, INITIAL_STATE);

  useEffect(() => {
    localStorage.setItem("user", JSON.stringify(state.user));
  }, [state.user]);

  return (
    <Context.Provider
      value={{
        user: state.user,
        isFetching: state.isFetching,
        error: state.error,
        dispatch,
      }}
    >
      {children}
    </Context.Provider>
  );
};

Now I want to use the Context in a class component and especially call the dispatch function, here a minimal example:

export default class Register extends Component {
  static contextType = Context;

  componentDidMount() {
    const { dispatch } = this.context;
    dispatch({ type: "LOGIN_START" });
  }

  render() {
    return (
      <div></div>
    )
  }
}

The Problem now is that dispatch is undefined, when I want to call it inside my class. Before I used the same context with const { dispatch, isFetching } = useContext(Context); inside a functional component and everything worked fine, what is the problem?

Just the initial state: `{user: null, isFetching: false, error: false}` — UnknownInnocent, Jan 05 '23 at 21:30
So it seems that your `Register` is not within `ContextProvider` — Konrad, Jan 05 '23 at 21:32
`ContextProvider` have to be an ancestor of `Register` component in the component tree — Konrad, Jan 05 '23 at 21:39
See for examples the [documentation](https://reactjs.org/docs/context.html#examples), where `ThemeContext.Provider` is a parent of `Toolbar` (it doesn't have to be a direct parent) — A_A, Jan 05 '23 at 21:40
I am passing the argument `children` to my ContextProvider, I thought this would add the components directly? I am sorry that I might mess a lot with this stuff but it's the first time I use it. — UnknownInnocent, Jan 05 '23 at 22:07

score 2 · Accepted Answer · answered Jan 06 '23 at 08:32

As suggested in one of the comments above, my ContextProvider has to be an ancestor of my Register component in the component tree. I simply added it inside my index.js:

...
import { ContextProvider } from "./context/Context";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <ContextProvider>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </ContextProvider>
);

Call function of Context in react class component

1 Answers1