A Really Simple Intro to Context in React

In this post, I’ll take you through a simple example of using React’s context API to pass information between components.

Let’s say we have a simple app with two components – one is an input (in this case a dropdown menu) and one which displays the re…

In this post, I’ll take you through a simple example of using React’s context API to pass information between components.

Let’s say we have a simple app with two components – one is an input (in this case a dropdown menu) and one which displays the result of the input.

Here’s the structure of the app –

App structure

And we want to pass information between the siblings like so –

Passing data between siblings

Please note: In reality, a far simpler way of passing information between siblings is by lifting state. I’m just using this example to keep things simple – you would only really use Context if the structure were more complex and you were having to pass props through a number of components. You can see my post about lifting state here.

Here’s what we’re aiming for –
Final result

The selected item from the dropdown menu appears below in the Result component.

You can find the starting code here.

The first thing we want to do is create a new file in our ‘src’ folder called Context.js –

src files

In the Context.js file, import React and { createContext }. Then create a variable to contain createContext(). You can call the variable whatever you like but it’s standard practice to use the word ‘Context’ within the name.

import createContext

Next, create a class component called ‘Provider’. Within the provider, we need to initialise the state of the ‘season’ value. We’ll just initialise it to an empty string as it doesn’t have a default value.

Provider component

Then, within the render, we want to return our provider. We do this by adding tags (if you named your context something different, then use this name for the first part of the tag). Inside the tags, add {this.props.children}.

add context.provider tags

This class will live at the top level of our application and will store all the data that we want to share with other components. In order to do this, we need to add a value to the <Context.Provider> tags.

Within the value, we want to set state to be ‘this.state’. Then, we’ll add the function that we want to use to handle the change when the user selects an option from the dropdown menu. So, we’ll add a handleChange function which sets the state of ‘season’ to ‘event.target.value’ (the option selected from the dropdown).

Add handleChange function

Now, we need to go over to the index.js file and add the Context.

First, import { Provider } from the Context file.

import provider

Then, wrap the App in <Provider> tags. This will ensure that the entire app has access to data in the Context file.

wrap app in provider tags

Now, lets go over to our Input.js file and import { Context } from our Context file.

import context

Next, wrap the dropdown menu in <Context.Consumer> tags. This will allow the dropdown menu to access data from the Context file.

wrap dropdown in context.consumer

Now, we need to add the handleChange function that we created earlier in the Context file to the dropdown menu.

To do this, we create an anonymous function with context in the parameters. Then we can add an onChange event listener to the <select> tag and set the value to {context.handleChange}.

add onchange event listener

Finally, we need to go over to the Result.js file and allow it to access the state of ‘season’.

We need to repeat the same steps we used for the Input.js file of importing { Context }, wrapping the component in <Context.Consumer> tags and creating an anonymous function.

This time though, we want to display the current state of ‘season’. We do this by adding {context.state.season} within some paragraph tags.

add season state to paragraph tags

That’s it! Now when you select an option from the dropdown menu, it should display below.

You can check your final code here.


Print Share Comment Cite Upload Translate
APA
Laura Todd | Sciencx (2024-03-29T13:39:44+00:00) » A Really Simple Intro to Context in React. Retrieved from https://www.scien.cx/2021/05/02/a-really-simple-intro-to-context-in-react/.
MLA
" » A Really Simple Intro to Context in React." Laura Todd | Sciencx - Sunday May 2, 2021, https://www.scien.cx/2021/05/02/a-really-simple-intro-to-context-in-react/
HARVARD
Laura Todd | Sciencx Sunday May 2, 2021 » A Really Simple Intro to Context in React., viewed 2024-03-29T13:39:44+00:00,<https://www.scien.cx/2021/05/02/a-really-simple-intro-to-context-in-react/>
VANCOUVER
Laura Todd | Sciencx - » A Really Simple Intro to Context in React. [Internet]. [Accessed 2024-03-29T13:39:44+00:00]. Available from: https://www.scien.cx/2021/05/02/a-really-simple-intro-to-context-in-react/
CHICAGO
" » A Really Simple Intro to Context in React." Laura Todd | Sciencx - Accessed 2024-03-29T13:39:44+00:00. https://www.scien.cx/2021/05/02/a-really-simple-intro-to-context-in-react/
IEEE
" » A Really Simple Intro to Context in React." Laura Todd | Sciencx [Online]. Available: https://www.scien.cx/2021/05/02/a-really-simple-intro-to-context-in-react/. [Accessed: 2024-03-29T13:39:44+00:00]
rf:citation
» A Really Simple Intro to Context in React | Laura Todd | Sciencx | https://www.scien.cx/2021/05/02/a-really-simple-intro-to-context-in-react/ | 2024-03-29T13:39:44+00:00
https://github.com/addpipe/simple-recorderjs-demo