In my project, I have a context provider that is itself an object with multiple properties: <Provider value={ { scaleNum: scaleNum, // number scaleLet: scaleLet, // string scaleSettings: scaleSettings, // stateful object setScaleSettings: setScaleSettings, // statesetter function scaleModeOptions: scaleModeOptions // string array } }> {children} </Provider> When I try to pass this, I get the… Read More TypeScript React error when passing to context object

I’m trying to use a custom hook to call a function which will be used for multiple components and for a context. However, the hook never gets the context value updated, it is always an empty array, but in the context the state used as the context value gets updated and in the components the… Read More Custom hook doesn't get updated value from context

React noob here. I’m trying to use a combination of Context, useState, useEffect, and sessionStorage to build a functioning global data store that persists on page refresh. When a user logins into the app, I fetch an API and then setUserData when I receive the response. That part works great, but I realized if a… Read More React – Persist Data on Page Refresh (useEffect, useContext, useState)

I’m trying to make a simple routing system. Either the user is authenticated or not. I’m trying to use hooks to achieve this but I’m not having the biggest success with it just yet. authProvider.tsx import React, {Dispatch, PropsWithChildren, SetStateAction, useContext, useState} from "react"; import { signInWithEmailAndPassword } from "firebase/auth"; import {ref, child, get} from… Read More React context doesn't update value when updated

I have a React app which uses the Material UI Theme Provider to set the font throughout, like this: App.js const App = () => { return ( <BrowserRouter> <Routes> … routes rendering various elements … </Routes> </BrowserRouter> ); }; const ThemedApp = () => { const theme = createTheme({ palette: { primary: { main:… Read More Is it possible to 'nest' themes in React?

i trying to using Context on my react app but i got error: Uncaught TypeError: Cannot destructure property ‘selected’ of ‘Object(…)(…)’ as it is undefined. in my InputsList file on this line: const { selected, setSelected } = useContext(ParamsContext); ParamsContext: import { createContext } from ‘react’; export const ParamsContext = createContext({ selected: [], setSelected: ()… Read More Error when using react context – Cannot destructure property

I’m building a wordle clone. I’ve structured it so that the keypad and the letter display grid are two separate components, Keypad.js and Row,js respectively. Project structure is as follows: src -components |-Grid.js |-Keypad.js |-Row.js -App.js -AppContex.js -index.js When a user enters a letter on the keypad, initially I want that letter to appear in… Read More How do I get a component to "listen" to changes in global state in a sibling component?

I have this profile which I load from my context, but it is calling the function over and over. How do I make it be called only once or only when needed. For example I have 2 Modals, where one be called if no profile exists and one where a profile exists. But when the… Read More React Context calling function indefinitely