useContext is a React hook for managing global state through the Context API.
Questions tagged [use-context]
586 questions
2
votes
1 answer
state do not change with useContext
hello
I am trying to make a menu toggle, where I have a variable with false as initial value, using react createContext and useContext hook, I set the initial state as true
// useMenu Context
import React, { useContext, useState } from…
Jagarkin
- 468
- 1
- 5
- 14
2
votes
1 answer
React useContext not rerendering on state change
I am brand new to react, so I apologize if this is a very basic question. I wasn't able to find the answer anywhere.
I have an ExtensionsContext component that stores an array of Extension class objects as the state.
import React, { useContext,…
David Simmerman
- 23
- 2
2
votes
1 answer
React-Native (expo) Retrieve an Initial Theme (or any initializing value)
I'd like to introduce a simple configurable theme to my (expo augmented) react-native app, with initial focus on the background color. I've had some success implementing the dynamic aspects, e.g. the user can pick a theme/background color in the…
rpc
- 79
- 7
2
votes
1 answer
Deleting items in ReactJS, using useState and useContext
As a fairly new addict to programming, I'm stuck with a simple app that lists items. Adding items, is OK. But as for deleting one item, I just can't figure out how to implement this function. Now on clicking an item the whole array of items is…
Viktor Helfrih
- 39
- 7
2
votes
2 answers
Limit renders of component that uses useContext via a useFooController/useFooHook
I'm using custom hooks for a component, and the custom hook uses a custom context. Consider
/* assume FooContext has { state: FooState, dispatch: () => any } */
const useFoo = () => {
const { state, dispatch } = useContext(FooContextContext)
…
user1713450
- 1,307
- 7
- 18
2
votes
0 answers
React reusable function that sets useContext
My current function handleLogin() takes care of calling to an API that sets the state of loggedIn to true inside the then() block like so.
function handleLogin() {
if(username.length && password.length) {
axios({
method: 'post',
url:…
Aviale
- 117
- 1
- 5
2
votes
0 answers
How to convert useContext to typescript
How can I get the setDay function to work in typescript, this was working fine in javascript, the context should only receive numbers as arguments :
const SetScreen = React.createContext();
const { setDay } = useContext(SetScreen);
return…
João Pedro
- 794
- 2
- 12
- 28
2
votes
1 answer
Share React web component state with context state at runtime
I have a list of settings that are used as data to instantiate web components at runtime. Each time a settings object is added to the list using a button in the main < App /> the item is looked up and is rendered at runtime. That components are…
jwize
- 4,230
- 1
- 33
- 51
2
votes
2 answers
Ract functional component doesn't update after state change
I was trying to update the state after user selects the dropdown, however, the selected option is never changed. See the gif -- https://recordit.co/KH2Pqn34bp.
I am confused that ideally, after using setFilterOptions to update state, it's supposed…
Haoyu Chen
- 1,760
- 1
- 22
- 32
2
votes
2 answers
useReducer and useContext Dispatch doesn't work in onClick function
I'll spare you the broader context as it's pretty simple. Using React hooks, the first dispatch here fires automatically and works just fine, but the second one doesn't. Context is imported from another file, so I assume it's a (lowercase) context…
Michael Heilemann
- 2,627
- 4
- 23
- 28
2
votes
1 answer
How to limit reactjs useContext for only some routes from react-router
I want to be able to pass some contexts only for some pages, but the way react-router is made I can't find out how to do that. For example, I want to AlertsProvider to be available only to alerts screen, GroupsProvider to be available only for…
Alan Willian Duarte
- 124
- 9
2
votes
2 answers
React State Infinite Loop with LocalStorage and DB
I am developing an eComm site where I persist the user's cart to global state and to the browser's local storage.
When they head to the Cart or Checkout page, I take the global state and send it to an API for verification and get back the "true"…
SteveW
- 337
- 4
- 11
2
votes
1 answer
React context undefined when refreshing page
I want to create a protected route that only authenticated users can access. It works BUT when im refreshing the page the context is undefined and redirects the user to the landing page. I dont really see why this is happening.
Console log after…
Chris
- 53
- 1
- 8
2
votes
1 answer
Setting context from child causes infinite call loop
I have an application that uses react-router-dom.
// App.js
function App() {
return (
Amos
- 333
- 1
- 3
- 12
2
votes
1 answer
How to handle authentication from a Node Express redirect to React Client (react-router-dom and useContext)
I am implementing Authorization Code Flow with the Spotify Web API for a simple React app using Node Express for the server and cannot figure out how to pass authentication credentials from the server to the client.
I am using React's useContext…
Jon
- 41
- 5