A Really Simple Intro to Context in React

#react #context #components #webdev

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 -

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

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 -

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 -

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.

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.

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}.

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).

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

First, import { Provider } from the Context file.

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

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

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

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}.

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.