useContext is undefined

Wrapped in a function with a throw, and it throws an error no matter what
I've verified it's wrapped in a provider, and the context set-up is identical to the other providers

const SaveButton: Component<JSX.HTMLAttributes<HTMLDivElement>> = (props) => {
  const ctx = useSettingsContext();
// rest of code...

const SaveButton: Component<JSX.HTMLAttributes<HTMLDivElement>> = (props) => {
  const ctx = useSettingsContext();
// rest of code...

It's not even being used, simply calling the function throws the error
This is the context set-up:

type SettingsContextType = {
  savedSettings: Settings;
  setSavedSettings: SetStoreFunction<Settings>;
  settings: Settings;
  setSettings: SetStoreFunction<Settings>;
};
const SettingsContext = createContext<SettingsContextType>();
export const useSettingsContext = () => {
  const context = useContext(SettingsContext);
  console.log(SettingsContext);
  if (!context)
    throw new Error("useSettings must be used within a SettingsProvider");
  return context;
};

type SettingsContextType = {
  savedSettings: Settings;
  setSavedSettings: SetStoreFunction<Settings>;
  settings: Settings;
  setSettings: SetStoreFunction<Settings>;
};
const SettingsContext = createContext<SettingsContextType>();
export const useSettingsContext = () => {
  const context = useContext(SettingsContext);
  console.log(SettingsContext);
  if (!context)
    throw new Error("useSettings must be used within a SettingsProvider");
  return context;
};

Every time I log at all stages nothing is null or not working, SettingsContext seems to be defined fine, but useContext breaks and returns undefined
It's wrappped in a provider in the global app
I'm not super experienced with context, is there something I'm missing? Is it the fact that the value is an object?

useContext is undefined

Wrapped in a function with a throw, and it throws an error no matter what
I've verified it's wrapped in a provider, and the context set-up is identical to the other providers

const SaveButton: Component<JSX.HTMLAttributes<HTMLDivElement>> = (props) => {
  const ctx = useSettingsContext();
// rest of code...

const SaveButton: Component<JSX.HTMLAttributes<HTMLDivElement>> = (props) => {
  const ctx = useSettingsContext();
// rest of code...

It's not even being used, simply calling the function throws the error
This is the context set-up:

type SettingsContextType = {
  savedSettings: Settings;
  setSavedSettings: SetStoreFunction<Settings>;
  settings: Settings;
  setSettings: SetStoreFunction<Settings>;
};
const SettingsContext = createContext<SettingsContextType>();
export const useSettingsContext = () => {
  const context = useContext(SettingsContext);
  console.log(SettingsContext);
  if (!context)
    throw new Error("useSettings must be used within a SettingsProvider");
  return context;
};

type SettingsContextType = {
  savedSettings: Settings;
  setSavedSettings: SetStoreFunction<Settings>;
  settings: Settings;
  setSettings: SetStoreFunction<Settings>;
};
const SettingsContext = createContext<SettingsContextType>();
export const useSettingsContext = () => {
  const context = useContext(SettingsContext);
  console.log(SettingsContext);
  if (!context)
    throw new Error("useSettings must be used within a SettingsProvider");
  return context;
};

useContext is undefined

Similar Threads

useContext is undefined

Similar Threads

Similar Threads

Similar Threads