Questions tagged [use-context]

useContext is a React hook for managing global state through the Context API.

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…
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…
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…
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…
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…
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…