Το Hook useContext για το Context στο React

Σε αυτό το μάθημα θα συνεχίσουμε να δουλεύουμε με το context. Τώρα θα χτίσουμε ένα δέντρο components. Αρχικά, σε ένα ξεχωριστό αρχείο θα δημιουργήσουμε το React component BigBox:

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

Θα το εισάγουμε και θα το τοποθετήσουμε στο κύριο μας component App:

import BigBox from './BigBox';

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

Για μεγαλύτερη σαφήνεια, θα δώσουμε στυλ λίγο στα div. Για αυτό, θα δημιουργήσουμε το αρχείο styles.css:

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

Δεν θα ξεχάσουμε να το εισάγουμε στο App.js:

import './styles.css';

Τώρα σε ένα ξεχωριστό αρχείο θα δημιουργήσουμε το component MiddleBox:

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

Και θα το τοποθετήσουμε στο μεγάλο κουτί BigBox:

import MiddleBox from './MiddleBox';

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

Θα κάνουμε το ίδιο με το μικρό κουτάκι SmallBox:

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

Θα τοποθετήσουμε δύο τέτοια κουτάκια στο MiddleBox:

import SmallBox from './SmallBox';

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

Χτίσαμε το δέντρο. Και τώρα θέλουμε από το App να μεταφέρουμε, ας πούμε, στο SmallBox μια συμβολοσειρά τιμή 'small box :)', χωρίς να χρησιμοποιήσουμε props, αλλά χρησιμοποιώντας το context (μήπως η εφαρμογή με τα κουτιά μας μεγαλώσει σε τεράστια μεγέθη).

Το αρχείο με το context MyContext.js το έχουμε ήδη δημιουργήσει και συνδέσουμε στο προηγούμενο μάθημα.

Το επόμενο βήμα που θα κάνουμε - θα τυλίξουμε το BigBox στον προσφορέα context, ο οποίος είναι μια ιδιότητα του αντικειμένου context MyContext. Τώρα όλα τα components, που περικλείονται σε αυτήν την κατασκευή (και αυτά είναι όλα τα κουτιά, που είναι εντός του BigBox) θα μπορούν να έχουν πρόσβαση και να εγγραφούν για αλλαγές στο context. Ως τιμή του context περνάμε την επιθυμητή 'small box :)':

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

Και τώρα μένει να διαβάσουμε την τιμή του context. Θέλαμε να τη χρησιμοποιήσουμε στο SmallBox, επομένως εισάγουμε εκεί το αρχείο context MyContext.js και το hook useContext:

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

Θα διαβάσουμε με τη βοήθεια του useContext την τιμή του context στη μεταβλητή name:

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

Εγγραφήκαμε στο SmallBox σε αυτό το context και, εάν αλλάξει, αυτό το component θα ενημερωθεί επίσης.

Και, τέλος, αντικαθιστούμε την τιμή της μεταβλητής name στη θέση των αποσιωπητικών:

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

Σε ένα κενό component App δημιουργήστε το component Parent, και σε αυτό το component Daughter, και στο Daughter το component Grandson. Χρησιμοποιώντας το context, μεταφέρετε από το App την τιμή της ηλικίας 42, και με τη βοήθεια του useContext εμφανίστε την στο component Daughter.

Και τώρα στο component Grandson εμφανίστε την τιμή της ηλικίας, αλλά διαιρεμένη με το 2.