useContext is a React hook for managing global state through the Context API.
Questions tagged [use-context]
586 questions
24
votes
2 answers
Typescript is giving me an error: Expected 0 arguments, but got 1
I want to define the interface the proper way but I am having trouble because it is expecting an argument even though the argument is empty.
I am using useContext and I defined the interface like this:
//react-auth0-spa.tsx
interface…
bradrar
- 647
- 1
- 8
- 19
18
votes
3 answers
React - useContext inside class
I'm newbie in react and i want use useContext inside my class, how do i solve this? This is example of my current code right now
import { Context } from '../context/ChatListContext'
const ChatList = ({ onAction }) => {
const {state,…
Hanif Nr
- 432
- 1
- 5
- 15
18
votes
4 answers
Better way to use multiple context providers in ReactNative
I am having an app in which I am using 3 Context Provider. For the app to work, I have to wrap
esafwan
- 17,311
- 33
- 107
- 166
11
votes
6 answers
How do I only wrap some pages in a Context Provider with Next.js?
I have three pages that I want to share data between (these are the core of the web app) but I also have a bunch of blog pages that don't care about that data. Everywhere I've looked suggests putting the Provider in the _app.tsx file. If I…
mpc75
- 937
- 9
- 22
11
votes
1 answer
Persistence with localStorage with useState and useContext React Hooks
I have set up a Provider to share some state for a user using useContext. As such I am trying to leverage local storage to save some state for a users images (avatars, etc.)
To start I'm tryingto persist the avatar for a user, essentially saving…
Antonio Pavicevac-Ortiz
- 7,239
- 17
- 68
- 141
8
votes
4 answers
Global screen loader in react
I am looking for a solution for using a global screen loader in react.
I am not that much familiar to react context, but I was wondering if that could help me here.
Basically I am introducing a screenloader and I was thinking that maybe the best way…
Maxrain
- 221
- 1
- 4
- 10
8
votes
1 answer
React-Native - TypeError: undefined is not an object evaluating useContext
useContext works fine here, the console.log right before the screen change works as expected and gives me the user object (just copy/pasted the relevant info to save you time)
import React, { useContext, useState, useEffect } from "react";
import {…
Ty Sellers
- 173
- 3
- 11
8
votes
2 answers
useContext across files causes circular dependencies
I have a two components Parent and Child and I want to export a context from Parent to Child but this causes circular dependency.
Consider, for example, Parent.js to be
import {Child} from './Child.js';
export const MyContext =…
Govinda Totla
- 576
- 6
- 19
8
votes
2 answers
useContext inside axios interceptor
I cant figure out why my useContext is not being called in this function:
import { useContext } from "react";
import { MyContext } from "../contexts/MyContext.js";
import axios from "axios";
const baseURL = "...";
const axiosInstance =…
Farrokh Rostami Kia
- 43
- 1
- 10
8
votes
4 answers
React: useContext value is not updated in the nested function
I have a simple context that sets some value that it get from backend, pseudo code:
export const FooContext = createContext();
export function Foo(props) {
const [value, setValue] = useState(null);
useEffect(() => {
…
Bob Sacamano
- 699
- 15
- 39
8
votes
1 answer
How to test react useContext useReducer dispatch in component
hope someone can point me the right direction with this. Basically I've created a react app which makes use of hooks, specifically useContext, useEffect and useReducer. My problem is that I can't seem to get tests to detect click or dispatch…
Noelt
- 111
- 1
- 5
8
votes
2 answers
How to useContext hook in Nextjs Layout
Im building an app with NextJS. My app displays a list of post and the user has the ability to sort the list from A-Z or Z-A and to display a specific amount of posts per page (10,20,etc). When the user clicks on a post to visit that specific post…
Carlos G
- 479
- 1
- 8
- 19
7
votes
1 answer
React Context value gets updated, but component doesn't re-render
This Codesandbox only has mobile styles as of now
I currently have a list of items being rendered based on their status.
Goal: When the user clicks on a nav button inside the modal, it updates the status type in context. Another component called…
Nunchuk
- 312
- 3
- 13
7
votes
2 answers
How to pass State in Context React
Im trying to pass and update a state with useContext;
App.js
import Home from './components/Home'
const UserContext = createContext();
function App() {
const [name, setName] = useState('Name');
return (
Sasquatch
- 87
- 1
- 2
- 7
7
votes
1 answer
React useContext not passing value down to deeply nested children
I'm brand new to the useContext hook and trying to figure out what I'm doing wrong... without the top imports, here's what my code looks like:
So the root of my project looks like this:
export default function App() {
return (
Meghan Hein
- 71
- 4