useContext Hook i React

I denne lektion fortsætter vi arbejdet med kontekst. Nu vil vi bygge et træ af komponenter. Til at starte med, i en separat fil, opretter vi React komponenten BigBox:

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

Vi importerer den og placerer den i vores hovedkomponent App:

import BigBox from './BigBox';

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

For mere klarhed vil vi style div'ene lidt. For at gøre dette opretter vi filen styles.css:

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

Husk at importere den i App.js:

import './styles.css';

Nu i en separat fil opretter vi komponenten MiddleBox:

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

Og lægger den i den store kasse BigBox:

import MiddleBox from './MiddleBox';

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

Vi gør det samme med den lille kasse SmallBox:

function SmallBox() {
	return (
		<p>Jeg er ... </p>
	);
}

Vi placerer to sådanne kasser i MiddleBox:

import SmallBox from './SmallBox';

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

Træet har vi bygget. Og nu vil vi fra vores App sende, for eksempel, til SmallBox en streng værdi 'small box :)', uden at bruge props, men ved at bruge kontekst (hvad nu hvis vores kasse applikation vokser sig enorm stor).

Filen med konteksten MyContext.js har vi allerede oprettet og tilsluttet i den forrige lektion.

Næste skridt, som vi vil tage - er at indpakke BigBox i en kontekst provider, som er en egenskab ved vores kontekst objekt MyContext. Nu kan alle komponenter, der er indeholdt i denne konstruktion (og det er alle kasser, nestede i BigBox) få adgang og abonnere på ændringer i konteksten. Som værdi for konteksten sender vi den ønskede 'small box :)':

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

Og nu er der kun tilbage at læse værdien af konteksten. Vi ville bruge den i SmallBox, så vi importerer kontekstfilen MyContext.js og hook useContext derind:

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

Vi læser med useContext kontekstværdien i variablen name:

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

Vi har abonneret SmallBox på denne kontekst og, hvis den ændres, vil dette komponent også blive opdateret.

Og endelig indsætter vi værdien af variablen name i stedet for ellipsen:

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

I den tomme komponent App, opret komponenten Parent, og i den komponenten Daughter, og i Daughter komponenten Grandson. Brug kontekst til at sende fra App værdien alder 42, og brug useContext til at vise den i komponenten Daughter.

Og nu i komponenten Grandson vis værdien af alderen, men divideret med 2.