useContext is a React hook for managing global state through the Context API.
Questions tagged [use-context]
586 questions
2
votes
1 answer
How to use "useContext" in typescript?
I am trying to make a dark/light theme system in my project, but I am having some problems with the code.
This line of code works fine in javascript:
const [darktheme, setDarkTheme] = useContext(ThemeContext);
But when I write it into typescript, I…

James Gaunt
- 119
- 1
- 14
2
votes
1 answer
Why I'm getting Uncaught TypeError: Cannot read properties of null (reading 'add') on deployment?
I'm working on a editor app using fabric.js.On localhost, When i click on Add Circle it works fine while on deployment it is causing cannot read properties of null.
Here is the code:
I'm using react context api by which i add objects in canvas and…

sohaib
- 574
- 5
- 16
2
votes
1 answer
How to persist state using localstorage with NextJS, ContextAPI, and useReducer
I'm creating a job site where you can add specific job cards to a favorites section by using the ContextAPI and useReducer hook for global state management.
I followed the code for using contextAPI and useReducer through this video on youtube:…

Chris Wu
- 43
- 1
- 5
2
votes
0 answers
How to do Authentication in react using protected routes
I am using useContext hook to sore the state to check if user loggedin or not and using protectedRoutes to protect my pages from access.
But after login, if i reload/refresh any of the proteted page, it again takes me to the login screen. WHY?
const…

viru jamwal
- 57
- 4
2
votes
1 answer
React, UseContext changes not reflecting immediately
When I log out from the Home page, the state gets updated and the page shows a login option, but after logging in again, the page again shows a login option untill refreshed, after refreshing the page, it displays the username? Why does the context…

Shubham Singhvi
- 304
- 1
- 10
2
votes
2 answers
How to properly save sensitive data on frontend using next.js?
I'm building a web app that has role permissions based, admin, user and also products, product A, B, C, etc. I get these data from a backend api.
Currently, I'm using local storage and useContext hook to save and manipulate these data, but an user…

RAFAEL DA SILVA
- 99
- 2
- 11
2
votes
0 answers
react-three-fiber useContext outside of a canvas is not the same as what is inside of the canvas
//App.tsx
import './App.css';
import { Canvas } from '@react-three/fiber';
import { Player } from './components/Player';
import { TCharacter } from './types';
import { Chat } from './components/Chat';
import { NetworkProvider } from…

Jonghyun Park
- 33
- 4
2
votes
4 answers
useContext React - Undefined when trying to consume context
I am trying to build a simple React App with some CRUD connected to a Rails API.
The structure of the project is this:
App.js
-> UserIndex
--> Form
--> User
-> User
I want to send a value (a function) from to its grandchild (NOT…

josegp
- 499
- 6
- 21
2
votes
1 answer
Error "Cannot find name CONTEXT" React Router 6 and useContext
I can't find a way to pass my data to all the children with React Router 6 and useContext hook. When I wrap the with my Context.Provider and call it with the Context.Consumer inside my component an error appears:
The error: Cannot…

André Guerreiro
- 45
- 4
2
votes
2 answers
Why isn't my React context being updated?
When I use the app and navigate to the SetContext component, I see the value of auth is correct ("dummy value") and after entering a value in the edit field and pressing the button I see the setAuth method trigger in the App component and then I…

Tim Manchester
- 137
- 1
- 3
- 16
2
votes
1 answer
useContext gives App.js:24 Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
I am using an Auth Context Provider in my App, which is initialised in this file:
authState.js
import React, { useReducer, createContext, useContext } from "react";
import authReducer from "./authReducer";
const initialState = {
user:…

eternityparadigm
- 375
- 3
- 10
2
votes
1 answer
State becomes undefined after dispatch with UseReducer and UseContext
Goal: I am trying to toggle the visibility of a 3D model using React reducer and context. 3D rendering is done with React hooks version of a framework called Xeokit. Models are rendered into a canvas element (3DCanvas.js) by giving them as props to…

Koib
- 23
- 4
2
votes
1 answer
Theme colors won't load/update correctly using useContext hook in combination with three.js (react-three-fiber) component
Could someone tell me why all the components in the tags adapt when changing the theme, but the three.js components ( and ) don't?
Box.jsx:
import { useFrame, useThree } from "@react-three/fiber";
import React, {…

Jan Arend
- 284
- 2
- 17
2
votes
1 answer
Conditional rendering of useContext
The task requires me to fetch data from an API, based on target category groups.
For example, www.localhost:8000/women fetches all data corresponding to women, and www.localhost:8000/women fetch all data corresponding to men.
I have now created a…

bazinga
- 87
- 2
- 9
2
votes
0 answers
Uncaught TypeError: react__WEBPACK_IMPORTED_MODULE_0__.useContext(...) is null when calling set function
I'm trying to set up a user login system using the userContext and localSotrage of the browser.
I have a first file that includes my provider and my context:
Auth.jsx
import { hasAuthenticated } from '../services/AuthAPI';
export const AuthContext…

Tom
- 21
- 3