A Really Simple Intro to Context in React
Tags: react, context, components, webdev
Published: 2021-05-02 09:28:53

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d64tk2980o5jz098n58k.jpg)

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

![Passing data between siblings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/65g2zhunyr6oquxwpvj5.jpg)

**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 <a href="https://dev.to/lauratoddcodes/a-really-simple-intro-to-lifting-state-in-react-1fli">here</a>.

Here's what we're aiming for -
![Final result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4dtgbi8cwkv48ijgii37.jpg)

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

You can find the starting code <a href="https://github.com/LauraToddCode/using-context/tree/starting-code/src">here</a>.

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

![src files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ipt707l4ksby8s8m52hw.jpg)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mslavm2xpws9xg9fgt4k.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o4x3untoxfy1eifufyl9.png)

Then, within the render, we want to return our provider. We do this by adding <Context.Provider> 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7dyselt4gnz0rstdpfl7.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4o6qjyw3ue984zzbuvfa.png)

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

First, import { Provider } from the Context file.

![import provider](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/as5pk6e40vsum7hav0tz.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nznnrrgxwfbqzrvxerim.png)

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

![import context](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p74l4ptt2u4p9likgtzr.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ayl1dcs0wm6tcvsgyhsl.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fnut6wbo5r789zma8p3b.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0mnp0qcs5vmvql5v8kvx.png)

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

You can check your final code&nbsp;<a href="https://github.com/LauraToddCode/using-context/tree/master/src">here</a>.