Questions tagged [use-context]

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

586 questions
2
votes
1 answer

Why is useContext() not returning the Provider value instead returning the initial value?

import React, { useContext, createContext } from "react"; const messageContext = createContext("Hello"); const Context = () => { const message = useContext(messageContext); return (
2
votes
2 answers

React useContext rerender component

I am trying to use useContext hook instead of Redux in my app. Both Header component and Login page are using same context. Both are children of Routing component which is using context provider. In sign up form I am using hard coded data to check…
Hasan Zubairi
  • 1,037
  • 4
  • 23
  • 57
2
votes
1 answer

How do I create a React Context in its own individual file?

I am learning React and building a project using context. Originally I build the context in the App.js component but I want to separate it into its own file to keep App.js cleaner. However, I am having trouble figuring out how this is done or if its…
Notorious776
  • 453
  • 6
  • 19
2
votes
1 answer

useEffect dependency with Context API. My code works fine with empty array but still gives the warning

So. I get clients from context as initialState and the code below is from my listing component (listClients.js or smth) . I update the context with the data fetched from firebase. Everything works fine actully with using empty array as dependency. I…
2
votes
0 answers

ContextAPI loses state on page reload and when opened in new tab

I am in the midst of creating a recipe app and use context API to ensure the data I fetched from an API call is available in all my components. Everything works as it should on first glance. The issue is that when I reload/open a component (these…
Kisho
  • 307
  • 2
  • 4
  • 13
2
votes
1 answer

Where to define socket event listeners that require data from global state using Hooks in React

I've been learning hooks and one concept still really bogles me. When using useEffect, any variables declared inside becomes old after the next re-render. To get access to changing values inside useEffect, the most common answer, and one Dan…
2
votes
0 answers

React Router and useContext not working together

When I'm trying to read data, it is successfully logged in console in every file except in my SwitchRouter.tsx and I don't know why. What I'm trying to do is get value of user(isLogin) and based on that value conditionally render component. (If user…
Marina
  • 187
  • 1
  • 3
  • 19
1
vote
1 answer

React context with useState not updating

I am trying to use the react context api. I am experiencing an issue though where the context/state value is not updating. I have no idea why this is happening and have looked at numerous threads but have found that nothing works for me. Here is the…
albsein9
  • 13
  • 3
1
vote
2 answers

react js undefined is not iterable (cannot read property Symbol(Symbol.iterator)) error

so i am trying to make a to-do app with react and i just tried using Context and i keep getting undefined is not iterable: this is Main/index.js: import React,{useContext} from "react"; import { BrowserRouter as Router,Routes, Route, Link} from…
1
vote
1 answer

How to use useContext in Next.js + TypeScript

I'm struggling with providing data via useContext. I know how to create useContext in React, but I was trying several times to do the same in Next.js with TypeScript. Could someone please help me. Here below my _app.jsx code: import { AppProps }…
1
vote
0 answers

Reusable React components and useContext?

I have a (very) small working portfolio site built using React that highlights various simple web development applications. Currently, this entire React app is technically only just one page, but I'd like to eventually expand this site to reflect my…
1
vote
0 answers

How can I create a array of objects using usestate inside usecontext

I can't update my array inside my context. I've tried with spread and concat, but doesn't work. Please consider that context are working fine, Also consider that I've tried both filter and find, and both are entering on if consitional, however is…
1
vote
1 answer

Cypress Testing Async Await Functions with useContext and Next.js

I am looking to ensure a notification appears within a Cypress integration test, with the correct message. I've created an async await function that has a try/catch block for the user to login, displaying different messages throughout their…
Luke
  • 761
  • 1
  • 18
1
vote
1 answer

How to update react context from multiple conmponents?

So i am trying to lear about React contexts and I am a bit confused. from its documentation: Context provides a way to pass data through the component tree without having to pass props down manually at every level. So this means i can have the…
ansh sachdeva
  • 1,220
  • 1
  • 15
  • 32
1
vote
1 answer

deconstruct useContext object

I am importing data fine at the moment using useContext although I am repeating the name weather.weather twice to get to the specific value. I would like to deconstruct the variable with the data so as to not repeat weather twice while obtaining the…
meWho
  • 129
  • 1
  • 8