useContext Hook in React

In deze les gaan we verder met context. Nu bouwen we een boom van componenten. Laten we eerst in een apart bestand een React component BigBox aanmaken:

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

Importeren we het en plaatsen we het in ons hoofdcomponent App:

import BigBox from './BigBox';

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

Voor meer duidelijkheid stylen we de div's een beetje. Maak hiervoor een bestand aan styles.css:

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

Vergeet niet om het te importeren in App.js:

import './styles.css';

Nu maken we in een apart bestand een component MiddleBox aan:

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

En plaatsen we het in de grote doos BigBox:

import MiddleBox from './MiddleBox';

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

We doen hetzelfde met een kleine doos SmallBox:

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

We plaatsen twee van deze doosjes in MiddleBox:

import SmallBox from './SmallBox';

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

De boom hebben we gebouwd. En nu willen we van onze App een stringwaarde 'small box :)' doorgeven, stel, aan SmallBox, zonder props te gebruiken, maar door gebruik te maken van context (stel dat onze doosapplicatie uitgroeit tot enorme afmetingen).

Het contextbestand MyContext.js hebben we al aangemaakt en aangesloten in de vorige les.

De volgende stap die we nemen - we wikkelen BigBox in een contextprovider, die een eigenschap is van ons contextobject MyContext. Nu kunnen alle componenten, ingesloten in deze constructie (en dat zijn alle doosjes, genest in BigBox) toegang krijgen en zich abonneren op contextwijzigingen. Als contextwaarde geven we de gewenste 'small box :)' door:

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

En nu rest alleen nog het lezen van de contextwaarde. We wilden het gebruiken in SmallBox, dus importeren we daar het contextbestand MyContext.js en de hook useContext:

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

We lezen met useContext de contextwaarde in de variabele name:

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

We hebben SmallBox geabonneerd op deze context en, als deze wijzigt, zal dit component ook worden bijgewerkt.

En tenslotte, we vervangen de waarde van de variabele name in plaats van de puntjes:

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

In een leeg component App maak je een component Parent aan, en daarin een component Daughter, en in Daughter een component Grandson. Gebruik context om vanuit App de leeftijdswaarde 42 door te geven, en gebruik useContext om het weer te geven in het component Daughter.

En toon nu in het component Grandson de leeftijdswaarde, maar gedeeld door 2.