Can't access GlobalStateContext in React Expo Router based Project

Question

In my App i want the username and the role becoming back from the api global avaiable in other components, so i made the createContext Hook. But cant access the data in the other components.

I have this Files index.js

import React from 'react';
import { GlobalStateProvider } from './GlobalStateContext';
import Login from './Login';
import Order from './Order';

export default function App() {
  return (
    <GlobalStateProvider>
      <Login />
      <Order />
    </GlobalStateProvider>
  );
}

GlobalStateContext.js

import React, {createContext, useState} from 'react';

export const GlobalStateContext = createContext();

export const GlobalStateProvider = ({children}) => {
  const [shoppingcart, setShoppingcart] = useState([]);
  const [shoppingcartcounter, setShoppingcartcounter] = useState(0);
  const [shoppingcartvalue, setShoppingcartvalue] = useState(0);
  const [username, setUsername] = useState("default");
  const [role, setRole] = useState("no_role");
  const [currentdateformated, setCurrentdateformated] = useState("");

  return (
    <GlobalStateContext.Provider value={{username, setUsername, role, setRole, setRole,currentdateformated, setCurrentdateformated, shoppingcart, setShoppingcart, shoppingcartcounter, 
    setShoppingcartcounter,shoppingcartvalue, setShoppingcartvalue}}>
      {children}
    </GlobalStateContext.Provider>
  );
};

Order.js (part of)

import React, {useState, useEffect, useContext} from 'react';
import {ScrollView, Text, View, StyleSheet, Image} from 'react-native';
import {TouchableWithoutFeedback, TouchableOpacity} from 'react-native';
import {useIsFocused } from '@react-navigation/native';
import Meal from './Meal';
import { useRouter } from "expo-router";
import { GlobalStateContext } from './GlobalStateContext';

const Order = () => {

  const navigation = useRouter();
  const [meals, setmeals] = useState([]);
  const [currentdate, setCurrentdate] = useState(new Date());
  const isFocused = useIsFocused();

  const {username, shoppingcart,shoppingcartcounter,currentdateformated, setCurrentdateformated, setShoppingcartcounter} = useContext(GlobalStateContext);

I can't acces the data and getting this error message.

Uncaught Error Cannot read properties of undefined (reading 'username') Call Stack Order app/Order.js renderWithHooks node_modules/react-dom/cjs/react-dom.development.js mountIndeterminateComponent node_modules/react-dom/cjs/react-dom.development.js beginWork node_modules/react-dom/cjs/react-dom.development.js callCallback node_modules/react-dom/cjs/react-dom.development.js invokeGuardedCallbackDev node_modules/react-dom/cjs/react-dom.development.js invokeGuardedCallback node_modules/react-dom/cjs/react-dom.development.js beginWork$1 node_modules/react-dom/cjs/react-dom.development.js performUnitOfWork node_modules/react-dom/cjs/react-dom.development.js workLoopSync node_modules/react-dom/cjs/react-dom.development.js renderRootSync node_modules/react-dom/cjs/react-dom.development.js performConcurrentWorkOnRoot node_modules/react-dom/cjs/react-dom.development.js workLoop node_modules/scheduler/cjs/scheduler.development.js flushWork node_modules/scheduler/cjs/scheduler.development.js performWorkUntilDeadline node_modules/scheduler/cjs/scheduler.development.js Collapse all 15 frames

Can anybody tell me why i cant' acces the data like username in Order.js ? Thank you

Can't access GlobalStateContext in React Expo Router based Project

0 Answers0