Posted on Jan 16, 2020

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

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.

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.