1

I have created a counter app in React js using context api for global state management .

But the problem is when i am clicking increase and decrease button it is not updating global values .

I am new to react , please provide guidance what is going wrong here .

ContextFile :

import {createContext,useState} from 'react';

export const DataContext = createContext({
    data:0,
    increase : () => {},
    decrease : () => {}
});

function DataContextProvider(props){
    const [data,setData] = useState();

    const increase = () => {
        setData(data + 1);
    }

    const decrease = () => {
        setData(data - 1);
    }

    return(
        <DataContext.Provider value={{data,increase,decrease}}>
            {props.children}
        </DataContext.Provider>
    );

};

export default DataContextProvider;

App.js :

import React,{useContext} from 'react';
import {DataContext} from './Context/dataContext';
import DataContextProvider from './Context/dataContext';
import IncreaseBtn from './Component/Increase';
import DecreaseBtn from './Component/Decrease';

const App = () => {
  const {data} = useContext(DataContext);
  
  return(
    <>
    <DataContextProvider>
      {data}
      <br/>
      <br/>
      <IncreaseBtn />
      <br/>
      <br/>
      <DecreaseBtn />
    </DataContextProvider>
    </>
  )
}

export default App;

Increase Button Component :

import React,{useContext} from 'react';
import {DataContext} from '../Context/dataContext';

const IncreaseBtn = () => {
    const {increase} = useContext(DataContext);

    return(
        <>
            <button onClick={increase}> Increase </button>
        </>
    )
}

export default IncreaseBtn;

Decrease Button Component :

import React,{useContext} from 'react';
import {DataContext} from '../Context/dataContext';

const DecreaseBtn = () => {
    const {decrease} = useContext(DataContext);

    return(
        <>
            <button onClick={decrease}> Decrease </button>
        </>
    )
}

export default DecreaseBtn;

Folder Structure : enter image description here

1
  • I would give an initial state of say useState(0) or any number ... just a point * as by default it takes undefined as initial state value .. Commented Sep 26, 2022 at 14:08

2 Answers 2

1
  • If you want to use context you should wrap your provider around those components, but here App component isn't wrapped but to its children 😉
  • Give an initial state of some "number" as it would be undefined and it gives NaN if you do the arithmetic operations with it.

Updated the sandbox for your ref

Sign up to request clarification or add additional context in comments.

1 Comment

Exactly , i have done this and values are updating now .
0

You are updating the state in the wrong way Try: setCount(count => count + 1);

1 Comment

That's not the issue though

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.