useContext() is undefined when i use useLocation()

Question

I'm working on a website using React. I'm getting this error when using useContext() and useLocation().

import React, { useContext } from "react";
import Layout from "../components/Layout";
import { LangStateContext } from "../context/LangContext";

import { useLocation } from 'react-router';


const PricingPage = () => {
  const { isIndoSelected } = useContext(LangStateContext);
  console.log(isIndoSelected);

  const location = useLocation();


  return (
    <Layout>
      a page
    </Layout>
  );
};

export default PricingPage;

This is the error im getting when i land on the page

Can anyone explain to me why this wont work and what a good workaround would be?

Thanks you

Answer 1

useContext needs Providers to work, so make sure that you have instantiated one that has this component as a direct or indirect child.

Also make sure that the context that you have created to instantiate this provider has this isIndoSelected that you're trying to access.

You can read more about React's Context usage here.