useContext context hook in React

In this lesson we will continue working with context. Now let's build a component tree. First, let's create a React component BigBox in a separate file:

function BigBox() {
	return (
		<p>bigbox</p>
	);
}

Let's import it and place it in our main component App:

import BigBox from './BigBox';

function App() {
	return (
		<BigBox />
	);
}

For greater clarity, let's style the divs a bit. To do this, create a file styles.css:

div {
	border: 1px solid blue;
	margin: 10px;
	text-align: center;
	max-width: 300px;
}

Let's not forget to import it into App.js:

import './styles.css';

Now, in a separate file, let's create the MiddleBox component:

function MiddleBox() {
	return (
		<p>middlebox</p>
	);
}

And we'll put it in a big box BigBox:

import MiddleBox from './MiddleBox';

function BigBox() {
	return (
		<div>
			<MiddleBox />
		</div>
	);
}

Let's do the same with a small box SmallBox:

function SmallBox() {
	return (
		<p>I am ... </p>
	);
}

Let's place two such boxes in MiddleBox:

import SmallBox from './SmallBox';

function MiddleBox() {
	return (
		<div>
			<SmallBox />
			<SmallBox />
		</div>
	);
}

We have built the tree. Now we want to pass from our App, let's say, to SmallBox the string value 'small box :)', without using props, but using the context (suddenly our boxed application grows to enormous sizes).

We have already created and connected the file with the context MyContext.js in the previous lesson.

The next step we'll take is to wrap BigBox in contextprovider, which is a property of our context object MyContext. Now all components enclosed in this structure (and this includes all boxes nested in BigBox) will be able to access and subscribe to context changes. As a context value, we pass the desired 'small box :)':

function App() {
	return (
		<MyContext.Provider value="small box :)">
			<BigBox />
		</MyContext.Provider>
	);
}

Now all that's left is to read the context value. We wanted to use it in SmallBox, so we import the context file MyContext.js and the hook useContext there:

import { useContext } from 'react';
import { MyContext } from './MyContext.js';

Let's read the context value into the variable name using useContext:

function SmallBox() {
	const name = useContext(MyContext);
	
	return (
		<div>
			<p>I am ... </p>
		</div>
	);
}

We subscribed SmallBox to this context and if it changes, this component will also be updated.

And finally, we substitute the value of the variable name instead of the ellipsis:

function SmallBox() {
	const name = useContext(MyContext);
	
	return (
		<div>
			<p>I am {name} </p>
		</div>
	);
}

In the empty App component, create a Parent component, and in it a Daughter component, and in Daughter a Grandson component. Using context, pass in the age value 42 from App, and use useContext to output it in Daughter.

Now, in the Grandson component, print the age value, but divided by 2.