CODEWITHSUNDEEP
javascriptreactjsreact-hooks
subprimeloads
subprimeloads

Reputation: 392

How to properly change React context value?

Say i’ve declared have the following context:

const ColorContext = React.createContext(“”)

I am trying to create a simple function that can change the value of the context, which can later be used in a number of other components as a global state variable. The function i've implemented however is not doing anything to change the context value, here is what i've done, feel free to let me know where I am going wrong in the code:

function GlobalContext(){

const {color, setColor} = useContext(ColorContext);

const toGreen = () => {
setColor(‘green’);
};

 return(
   <>
    <ColorContext.Provider value={{color, setColor}}>
    <button onClick={toGreen}> Change Color </button>
    <ColorContext.Provider/>
   </>
 )
}

Upvotes: 4

Views: 5874

Answers (2)

Kingshuk Saha
Kingshuk Saha

Reputation: 154

  1. toGreen() is passed as an argument to the value of ColorContext
  2. Any Nested Component can use toGreen() to change the color
// Created a New Context for global use
const ColorContext = createContext();

export default function GlobalContext() {
  // I set the value of color to red using array destructuring
  const [color, setColor] = useState('Red');

  const toGreen = () => {
    // I set the color to green when this function is called
    setColor('Green');
  }

  return (
    <div>
      {/* I pass the both the color and the toGreen function as args, now they can be accessed by all nested components */}
      <ColorContext.Provider value= {{color, toGreen}}>
        <h1>Current Color is : {color}</h1>
        <NestedComponent />
      </ColorContext.Provider>
    </div>
  );
}

// I created a nested component
function NestedComponent() {
  // useContext lets us access the values passed to ColorContext
  const colorProvider = useContext(ColorContext);
  return (
    // When button is Clicked the toGreen function passed down is triggered
    <button onClick={colorProvider.toGreen}>Change Color from {colorProvider.color} to Green</button>
  );
}

Explanation and Code in Code Sandbox Hope it helps😄

Upvotes: 4

Adam Jenkins
Adam Jenkins

Reputation: 55623

You're doing it wrong. useContext is for use in components lower in the tree than the Context's Provider. What you want in the component that renders your Context.Provider is this:

const [color, setColor] = useState();

So the whole thing would look something like this:

const ColorContext = React.createContext();

const MyColorContextProvider = ({children}) => {

  const [color, setColor] = useState(); 
  const toGreen = () => setColor('green');

  return (
   <ColorContext.Provider value={{color,setColor}}>
      {children}
      <button onClick={toGreen}>Change to Green</button>
   </ColorContext.Provider>
  );
}

and then:

const MyChildComponent = () => {
   const {color} = useContext(ColorContext);

   return <>The color in context is {color}</>
}

your app could be:

const App = () => {
  return (
   <MyColorContextProvider>
    <MyChildComponent/>
   </MyColorContextProvider>
  );
}

Stackblitz: https://stackblitz.com/edit/react-gym2ku?file=src%2FColorContextProvider.js

Upvotes: 6

Related Questions