Hook del contesto useContext in React

In questa lezione continueremo a lavorare con il contesto. Ora costruiremo un albero di componenti. Per iniziare, in un file separato creeremo il componente React BigBox:

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

Importiamolo e posizioniamolo nel nostro componente principale App:

import BigBox from './BigBox';

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

Per maggiore chiarezza, applicheremo un po' di stili ai div. Per fare ciò, creiamo il file styles.css:

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

Non dimentichiamo di importarlo in App.js:

import './styles.css';

Ora in un file separato creiamo il componente MiddleBox:

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

E inseriamolo nella scatola grande BigBox:

import MiddleBox from './MiddleBox';

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

Ripetiamo la stessa cosa con la scatola piccola SmallBox:

function SmallBox() {
	return (
		<p>Io sono ... </p>
	);
}

Posizioniamo due di queste scatole in MiddleBox:

import SmallBox from './SmallBox';

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

L'albero è costruito. E ora vogliamo passare dal nostro App, supponiamo, a SmallBox un valore stringa 'small box :)', senza utilizzare le props, ma utilizzando il contesto (nel caso in cui la nostra applicazione a scatole cresca fino a dimensioni enormi).

Il file con il contesto MyContext.js lo abbiamo già creato e collegato nella lezione precedente.

Il prossimo passo che faremo è avvolgere BigBox nel provider del contesto, che è una proprietà del nostro oggetto contesto MyContext. Ora tutti i componenti racchiusi in questa costruzione (e quindi tutte le scatole annidate in BigBox) potranno accedere e sottoscriversi alle modifiche del contesto. Come valore del contesto passiamo il desiderato 'small box :)':

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

E ora non resta che leggere il valore del contesto. Volevamo usarlo in SmallBox, quindi importiamo lì il file contesto MyContext.js e l'hook useContext:

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

Leggiamo usando useContext il valore del contesto nella variabile name:

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

Abbiamo sottoscritto SmallBox a questo contesto e, se cambia, anche questo componente verrà aggiornato.

E, infine, sostituiamo il valore della variabile name ai puntini di sospensione:

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

In un componente vuoto App create il componente Parent, e in esso il componente Daughter, e in Daughter il componente Grandson. Utilizzando il contesto, trasmettete da App il valore dell'età 42, e con l'aiuto di useContext visualizzatelo nel componente Daughter.

E ora nel componente Grandson visualizzate il valore dell'età, ma diviso per 2.