Context.js | Contextual Menus with Twitters Bootstrap.css | Menu library

I have a react app that has a NavBar and a grid system. This NavBar shows some information and has buttons to run the application and the grid system contains the functions and visualizes the application. I want to have the NavBar button click trigger a function to call in the grid system component, specifically the animateAlgorithm function. As you can see, I already have a provider that shares some state information between these two components. What I don't understand is how to make it call the function.

https://github.com/austinedger0811/path-finding-visualization

App.js

i am having trouble adding a dark-theme support to my react-native app.

theme-context.js

I want to make isLoading (global state using React Context) value and changeIsLoading function (its changing function from IsLoadingContext.js file) becomes accessible to all files (function components and simple javascript functions).

I know that React Hooks can only be called inside of the body of a function component.

Question: So in my case here, how could I called isLoading and changeIsLoading inside a util file (non-function component or just a simple javascript function)?

What should I change from the code?

1. (location: SummariesPage.js) Click the button inside SummariesPage component
2. (location: SummariesPage.js) Call onApplyButtonIsClicked function in SummariesPage component
3. (location: SummariesPage.js) Change isLoading global state into true then call fetchAPISummaries function
4. (location: fetchAPISummaries.js) Call fetchAPICycles function
5. (location: fetchAPICycles.js) Call exportJSONToExcel function
6. (location: exportJSONToExcel.js) Export the JSON into an Excel file then change isLoading global state into false
7. IsLoadingContextProvider component will be rerendered and the isLoading value in SummariesPage will be true

I'm using code from a tutorial, which uses createContext and I'm kind of confused on what exactly it's doing, and I believe that it's causing errors where I wouldn't necessarily expect. I have two components, Dashboard and Login which are different pages of my web app. It generates the error: Unhandled Rejection (TypeError): Cannot read property 'data' of undefined For some reason, the following line in Dashboard.js:

I'm still learning and I've been following tutorials on firebase auth with reactjs. Now I'm branching off into functionalities the tutorial doesn't cover (anonymous sign-in & linking to google) and I think I'm not understanding correctly how to use firebase's linkWithPopup.

I'm getting TypeError: firebase__WEBPACK_IMPORTED_MODULE_1_.default.auth.GoogleAuthProvider is not a constructor when I try do it. Here is the code:

firebase.js

I have a GlobalContext.js file. I want to reach this part by having a variable named "global" in my MainScreen. But it doesn't see it. Where could be my mistake?

I thought what I did was correct, but it doesnt work

Here is GlobalContext.js

Don't know why I'm experiencing the following inside the package testcafe-hammerhead.

I would like to see how I can create global contexts in NextJS and have global variables inside the app.

Currently I have AppContext.js as

When I run the code the nameGen page evaluation returns a type error that states: "Cannot read property 'innerHTML' of null". The span tag it is targeting has a number value for price and that is what I am trying to get to. How do I access the number value that is contained in the span tag I am targeting? Any help or insight would be greatly appreciated. The element I am targeting looks like this: