React Context provides a way to pass data through the component tree without having to pass props down manually at every level.
Questions tagged [react-context]
1056 questions
6
votes
2 answers
React Context - setState with onClick inside Consumer
I have implemented React Context API and I am trying to update the state defined inside the Provider via an onClick function inside a child component.
This is what I have done so far, in the App.js I have:
import { createContext } from…
Alessio
- 2,907
- 17
- 32
- 39
6
votes
3 answers
Update react context outside of a consumer?
I am trying to understand how the new react context API works.
In redux, it is possible for a component to have knowledge of dispatch actions without knowing state. This allows updates to redux state without causing a rerender of components that…
Jeremy Gottfried
- 499
- 4
- 19
6
votes
1 answer
React Context and Next JS
I'm trying to add simple React Context to my app. I create Context in "./components/DataProvider.js" that looks like this:
import React, { Component } from 'react'
const DataContext = React.createContext()
class DataProvider extends Component {
…
GeekDaddy
- 619
- 1
- 9
- 21
6
votes
0 answers
creating ref within react context provider
I am having a hard time setting a ref within a context provider. Is this not possible or is there something I am missing? I am able to createRefs in other components the same way but the following always shows the ref as { current: null }
const…
Thomas Yancey
- 351
- 3
- 7
5
votes
2 answers
Update state from deeply nested component without re-rendering parents
I have a form page structured more or less as follows:
The Map component should only be rendered once, as there is an animation that is…
Joe Maffei
- 1,380
- 10
- 17
5
votes
5 answers
Implement useSelector equivalent for React Context?
There's a bunch of articles out there that show how Redux can be replaced with context and hooks (see this one from Kent Dodds, for instance). The basic idea is to make your global state available through a context instead of putting it inside a…
Nicolas Trahan
- 295
- 3
- 8
5
votes
1 answer
React Hooks: Display global spinner using axios interceptor?
I would like to add a Loader component to be rendered whenever an API call is being made in React. I want to use react context + hooks instead of redux.
As the rules of react hooks say, we should not use react hooks outside the react component. But…
CodeZombie
- 1,754
- 12
- 22
5
votes
1 answer
How to acess React context from Apollo set Context Http Link
I am trying to access a react context values within the setContext function for my Apollo client. I would like to be able to dynamically update the header for each graphql request with the react context value. But I face an error with no visible…
john
- 757
- 10
- 23
5
votes
2 answers
Call API Every X Seconds in React Functional Component
I have the following react class component to call an API every 10 seconds. Its works with no issues.
class Alerts extends Component {
constructor() {
this.state = {
alerts: {},
}
}
componentDidMount() {
this.getAlerts()
…
hawx
- 1,501
- 3
- 20
- 34
5
votes
4 answers
Can I use the React Context API inside a Context API or do I have to merge them?
I am just curios about if it would be possible to use the Context API inside a Context API. Like for example I would have a Context API for an AppState and want to use that in another Context API which handles a WebSocket connection?
thiloilg
- 765
- 8
- 19
5
votes
0 answers
How to declare "propTypes" for React Hooks using React.useContext
Given an app environment where typescript is not an option und React Hooks are used.
When using a context with ...
const myContext = useContext(MyContext)
...how would one declare the context signature in a way we know it from the…
Achim Koellner
- 811
- 11
- 21
5
votes
2 answers
How do you update Formik initial values with the react context api values after an AJAX request?
The issue I’m facing though is that I want to mimic the behaviour of the FlaskLogin current_user in React throughout the component treed. For anyone that’s not familiar with FlaskLogin, current_user just stores a session of the user who’s currently…
Fredmental
- 165
- 2
- 12
5
votes
2 answers
React Context not working with server side rendering
I'm trying to get react context working with SSR. This is what I have
// server/index.s
import express from "express";
import serverRenderer from "./middleware/renderer";
const PORT = 3000;
const path = require("path");
const app = express();
const…
praks5432
- 5,732
- 22
- 76
- 138
5
votes
1 answer
Enzyme errors with React Context and Hooks API
I've created this RootContext to handle authentication for my small React Hooks app. Everything works as expected except for getting weird errors using Enzyme's shallow and mount.
I'm trying to test it like this:
const wrapper = mount(
dan-klasson
- 12,215
- 11
- 49
- 91
5
votes
1 answer
What is the right way to use new React hook useContext?
I have some difficulties to understand the new way to use react Context API.
I have an app with a custom class Firebase. Now I want to make a hook to pass it. Before I used HOC (higher-order Component) and context.
My questions
Do I need to use HOC…
victor zadorozhnyy
- 675
- 1
- 10
- 19