React useContext: How to Update Context from Child Component

Why useContext

  • an alternative to using Redux
  • allows you to avoid “props-drilling”, which means that if you have a deep nesting of your components, you won’t have to pass the props all that way down

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
  • welcome.component, which is basically a main page.
  • library.component — an empty component created solely for demonstration purposes.
  • containers/app-layout.component has a purpose of ‘structuring’ the components and solves the following issue:
React Router warning
  • state/url.context.ts is our context
  • hooks/url.hook.ts — updates the url 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.
  • When I click on the Library button, the route will update to /library and I show it in the navbar as a breadcrumb.
/library route

Create your Context

url.context.ts

Create a Setter to update your Context’s state

  • we will create a setCurrentUrl setter method to update the state from within a child component.
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

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