How to useContext and set value of context in child components in 3 steps

#react

1- Create a Context constant and export it

We will import this constant(const) in all functions which we will be using the context. I will name the file Context.js

//Context.js

import React from "react";
export const Context = React.createContext();

2- In App.js Import and provide the context to all Functional Components

//App.js

import React, { useState } from "react";
import { Context } from "./Context.js";

import ComponentA from "./ComponentA";
import ComponentB from "./ComponentB";

export default function App() {
  const [context, setContext] = useState("default context value");
  return (
    <Context.Provider value={[context, setContext]}>
      <ComponentA />
      <ComponentB />
    </Context.Provider>
  );
}

To do that we do 3 things :)

a- Import the Context we created in 1st step
b- Create a state (via useState) which we will share between components.
c- Wrap components with Context.Provider and pass the state(context) and a function(setContext) to update the state which we created in step b.

3- Consume and set/change value of the context in child components.

//ComponentA.js

import React, { useContext } from "react";
import { Context } from "./Context";

export default function ComponentA() {
  const [context, setContext] = useContext(Context);
  return (
    <div>
      ComponentA:
      <button onClick={() => setContext("New Value")}>
        Change Context Value
      </button>
    </div>
  );
}

//ComponentB.js

import React, { useContext } from "react";
import { Context } from "./Context";

export default function ComponentB() {
  const [context, setContext] = useContext(Context);
  return <div>ComponentB: {context}</div>;
}

To consume and change the value of context:

a- Import Context we created in step 1.
b- Import useContext from "react"
c- Consume value of context via useContext and use it like a state variable (see ComponentB)
d- Change the value via setContext function which we get from useContext (see ComponentA)

Full Code:

Top comments (10)

Subhadip Pramanik • Aug 2 '20 • Edited

That's exactly I was looking for and thanks for explaining it such clearly. I followed the same steps in my react native app. But the problem I see here is when my child screen changes the state, it navigates to parent screen.
As a noob I am sure I am doing something wrong.. but not able to figure out. Could you suggest me where should I look into to figure this out?
My flow is

<Context.Provider>
  <Navigator/>
</Context.Provider>

The Navigator has multiple stacks and one of them changes the value of context.

aslamiqbal • Jan 20 '21

It saves my life. Greate article.

issadarkthing • Apr 25 '21

Any idea on how to do this using typescript?

gtala86 • Jan 10 '22 • Edited

did you find any solution?

Tungamirai • Jun 3 '23 • Edited

something like this maybe ?createContext<[string, React.Dispatch<React.SetStateAction<string>>]>([null!, () => null!]);

Dat Duong • Jul 19 '21 • Edited

I tried useState for Map:
const [settingValues, setSettingValues] = React.useState>(() => new Map())

When I try to put [settingValues, setSettingValues] to context provider, I have this error: Type '(Map | Dispatch>>)[]' is missing the following properties from type 'Map': clear, delete, get, has, and 3 more.