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
0
votes
1 answer
React Provider Pattern, prop not updating in child component
So i have written a provider to pass strings to any part of my application. The issue i have is that if i add a strings prop to my child component it overrides the entire prop and seems to ignore the merge i do in connector
Provider
import {…
![](../../users/profiles/2889480.webp)
Tim Smart
- 178
- 1
- 12
0
votes
1 answer
react-redux connect giving undefined props
I am working with react-redux for state management and passing state store using provider but I dont know why it is comming as undefined in the consumer part
my provider component
render(){
return (
…
![](../../users/profiles/9339537.webp)
Aniketh Saha
- 677
- 7
- 18
0
votes
1 answer
"If" statement in React Context API
How can I use "if" statement in Context.Consumer? I need to check if context.state.showLoginBox is true, then show the div below.
class LogInBox extends Component {
render() {
return(
…
![](../../users/profiles/6672165.webp)
Ivan Burzakovskiy
- 655
- 1
- 5
- 20
0
votes
2 answers
React-router-V4 render error when using ReactJS new context API
I´m trying to use React Router V4 with new React´s context API. Here is my code:
class App extends Component {
static propTypes = {
router: PropTypes.func.isRequired,
module: PropTypes.string.isRequired,
sideMenuConfig:…
![](../../users/profiles/2697571.webp)
Mendes
- 13,757
- 24
- 122
- 217
0
votes
1 answer
Possible to use React's new Context API programmatically?
I'm trying to have 1 big global state where I can perform actions, but I don't want all those actions to live in the same file.
I want to break actions out to their own files and abstract with a changeState function (like a reducer), but I'm not…
![](../../users/profiles/175825.webp)
corysimmons
- 5,624
- 3
- 42
- 50
-1
votes
2 answers
Understanding how we can avoid passing props through many levels of component hierarchy in ReactJS
I was going through ReactJS docs. On the page explaining Contexts, I came across following:
If you only want to avoid passing some props through many levels, component composition is often a simpler solution than context.
For example, consider a…
![](../../users/profiles/13782227.webp)
Rnj
- 391
- 6
-1
votes
0 answers
I'm using context api and i'm getting this error and i don't have idea what todo
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import {StateProvider} from './StateProvider';
import App from './App';
import reportWebVitals from './reportWebVitals';
import reducer from './reducer';
import {…
![](../../users/profiles/15845718.webp)
Vikrant Patil
- 1
- 1
-1
votes
0 answers
How to set current user with data from graphql query
I'm trying to set admin with data.currentAdmin from
export const AuthContextProvider: FC = ({ children }) => {
const [admin, setAdmin] = useState(null);
const [currentAdmin, { data }] = useCurrentAdminLazyQuery();
const…
![](../../users/profiles/13847627.webp)
brand marke
- 97
- 5
-1
votes
1 answer
How to make Jest test for hook without UI
I have the next hook
const useFetch => {
let { state, dispatch } = useContext(AppContext);
const fetch1 = async () => {
...code to fetch data (mocked)
}
const fetch2 = () => {
...
}
return {
fetch1,
fetch2,
...
…
![](../../users/profiles/2987428.webp)
Shoke
- 3
- 4
-1
votes
1 answer
How to test function which call api?
How to test a function which call get API and output a response.
I tried but I am able to test initial data which is in state , but I want to know how to test the function which updates the initial state when the API is called .
code Example what I…
![](../../users/profiles/15272979.webp)
Smith
- 1
-1
votes
3 answers
React - How to apply multiple values from an object using context
I use a color theme in my project for this, I used a React context to pass the value in several components, everything worked fine for me until I decided to add another property inside the object in order to apply different colors to different…
![](../../users/profiles/13045795.webp)
Synchro
- 582
- 3
- 9
-1
votes
1 answer
React - How to access hook value using Context
I have a LessonThemes component I want to access the color value using Context. I have a Test component, I want to import the LessonThemes component inside the Test component and access the color value in the Test component using the React Context,…
![](../../users/profiles/13045795.webp)
Synchro
- 582
- 3
- 9
-1
votes
1 answer
useState array not updated when invoking function from another screen
I'm trying to add items to an array saved as a local state (using useState) through a function that is sent to another screen as a navigation param.
Assume i have ScreenA which looks:
ScreenA = () => {
const[obj,setObj] =…
![](../../users/profiles/14491996.webp)
menash
- 13
- 4
-1
votes
1 answer
Component not re-rendering after waiting for react context
I am checking to see if isFetchingData then don't render yet but its not re-rendering once isFetchingData is set to false. I have the useEffect in the context and i would hope that would re-render once isFetchingData is set to false. Any ideas?
When…
![](../../users/profiles/4453701.webp)
coding1223322
- 321
- 4
- 19
-1
votes
1 answer
Updating a single item in React context state
So I have a Context of the following format:
class UserProvider extends Component {
constructor(props) {
super(props)
this.initialize = (details) => {
this.setState(state => {
//Setting each item…
![](../../users/profiles/5939597.webp)
Avagantamo
- 119
- 8