React useContext: How to Update Context from Child Component

Why useContext

  • empowers functional components

Context is well explained in the official React documentation, so I decided to go with rather a practical example.

Source Code Files Structure

source code files structure
  • header.component
React Router warning
  • state/url.context.ts is our context

So, I have a particular use case scenario for the useContext (screenshots below illustrate already working solution):

/welcome route
  • My header has breadcrumbs, that show which page the user is currently viewing.
/library route

Create your Context

In my case, I called it urlContext, and it will store the url value, which it receives from React Router match.

url.context.ts

Create a Setter to update your Context’s state

  • create a useUrl hook, which stores the state of the context, as well as updates it.
url.hook.ts

Context Provider

Context.Provider

We have our routes wrapped into urlContext.Provider, which provides the context to the components it wraps.

Set Up Your Routes

App.tsx

Update Your Context

So, the idea is that when I am visiting the library page, my route obviously changed to /library, the context state is updated and the change is reflected in my header component.

A match object contains information about how a <Route path> matched the URL. match objects contain the following properties:

url - (string) The matched portion of the URL. Useful for building nested <Link>s

  • Now what we’re going to do is use setCurrentUrl setter to update the context state with the value of match.url
library.component.tsx
  • After we created our context and wrapped around our components, our AppLayout component will consume its value.
app-layout.component.tsx

The screenshot above has our Header component nested inside the AppLayout component, and our parent component also contains our routes (/library and /welcome)as its children.

And as you can see, we import our urlContext, destructure it, and pass the url as a prop to our Header so that it can use it, right.

The last part is easy now, we just render the prop where we want inside the header, in my case it acts as a breadcrumb.

header.component.tsx

💻 The source code can be found here

That’s all Folks! ☕️

Everything is unknown until it’s known. Self-learner.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store