useContext is a React hook for managing global state through the Context API.
Questions tagged [use-context]
586 questions
1
vote
1 answer
REACT + FIREBASE : Manage user data with useContext
I am using firebase for authentication in my react application. I have an AuthContext as:
import React, { useContext, useState, useEffect } from 'react';
import { auth, storage, db } from '../firebase';
const AuthContext =…
anulamatamang
- 23
- 1
- 5
1
vote
1 answer
createContext/ useContext in React not working as expected
Can't understand why my use of createContext and useContext is not working in my React application.
I have my context file like so:
// @flow
import { createContext, useContext } from "react";
export type CountryIndexProviderType = {
index:…
cts
- 908
- 1
- 9
- 30
1
vote
1 answer
When declare useContext, Error: Invalid hook call. Hooks can only be called inside of the body of a function component
I'm creating an AuthContext that will be used on the LoginPage, there is no error in VSCode but when I run the application it gives an error like the following:
Error: Invalid hook call. Hooks can only be called inside of the body of a function…
Raazescythe
- 117
- 1
- 20
1
vote
2 answers
useContext / createContext with TypeScript - Type must have a '[Symbol.iterator]()' method that returns an iterator
I read the article
Application State Management with React from Kent C. Dodds.
I wanted to use TypeScript instead of JavaScript.
But I am failing with the following when I want to destruct the context
The application itself works. It is just an IDE…
basti500
- 600
- 4
- 20
1
vote
1 answer
Reactjs: Unknown why function re-run second time
I started learning react, yesterday I ran into this issue, somebody please explain me.
When I click button "add to wishlist" the piece of code below run 1st time, set product property "inWishList": true, but unknown why it rerun and set it back to…
J.Tran
- 115
- 1
- 8
1
vote
0 answers
Use context in React with Typescript and Auth0
I want to make a context file in which I put a Auth0 identification that is passed as props. Unfortunately I just started with typescript and thus I'm quite struggeling. Here is my file.
import React from 'react';
import { createContext, useContext}…
Jenny
- 494
- 1
- 4
- 16
1
vote
0 answers
Multiple components mutating a property subsequently (within a context) results in only one effective mutation
Let's say I have a context provider CounterProvider like so:
const CounterProvider = ({ children }) => {
const [data, setData] = useState({ count: 0 });
const setCount = count => {
typeof count === 'function' && (count =…
SDev
- 11
- 1
- 3
1
vote
1 answer
How does my useContext component know to get the value in App.js?
I'm following a tutorial and it looks like this:
App.js
import React from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import { Index } from './pages/index';
import { About } from './pages/about/about';
import {…
filifunk
- 543
- 1
- 6
- 18
1
vote
1 answer
How to implement useContext (React Native, Expo) to control weather unit settings?
I am trying to implement the ability to switch between imperial and metric units using the useContext() hook. So far, I have not had much success. I have read the React useContext() documentation and followed this article. This is my current…
Wesley26
- 21
- 4
1
vote
2 answers
How can I avoid the React/JSX Pyramid of Doom?
I like to use contexts in my React and React Native projects, which means multiple context providers per project. As a result, the root of my app often looks like this:
…
Joel Rummel
- 802
- 5
- 18
1
vote
1 answer
How to use useContext to translate different pages
I'm trying to understand 'useContext' to translate different Components of my application. In my code I'm receiving the error "language, languages, and handleIdiom is not defined". I understand that in my "Menu" Component I didn't define them, but…
Flavio Andrade
- 99
- 9
1
vote
1 answer
React useContext & useReducer - Need global state in app, confused about using one vs multiple reducers
I need to share pieces of information across my app, like user details, avatar, and in-app alerts. I'm concerned I might not be using useReducer and useContext the right way since I'm just subscribing everything to this one reducer and using it as a…
Bryson Kruk
- 281
- 4
- 12
1
vote
0 answers
UseContext Doesn't Re-render when an component value is updated
I'm using React's context api to store an array of Favorite products.The favorites Array is filled with Boolean Value False and turned to true based on id of the products.There is collection page which displays productCards having an addtoFavorite…
Sandeep M
- 23
- 5
1
vote
2 answers
getting problem on using useContext in react?
I have a simple react app in which i have to use useContext.
(btw im using vite + react)
here is my code for Context.jsx
import React, {useContext} from 'react';
const emailContext = React.createContext();
export const useEmail = () =>…
Ritik Ranjan
- 23
- 2
- 5
1
vote
3 answers
Passing function into context in react-native using typescript
const AuthContext = React.createContext({ currentUser: null, signUp: null});
export function useAuth() {
return useContext(AuthContext);
}
export function AuthProvider({ children }) {
const [ currentUser, setCurrentUser ] =…
Ritik Ranjan
- 23
- 2
- 5