Хук контекста useContext en React

En esta lección continuaremos trabajando con el contexto. Ahora construiremos un árbol de componentes. Para empezar, en un archivo separado crearemos el componente React BigBox:

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

Importémoslo y coloquémoslo en nuestro componente principal App:

import BigBox from './BigBox';

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

Para mayor claridad, apliquemos algunos estilos a los divs. Para ello crearemos el archivo styles.css:

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

No olvidemos importarlo en App.js:

import './styles.css';

Ahora en un archivo separado crearemos el componente MiddleBox:

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

Y lo colocaremos en la caja grande BigBox:

import MiddleBox from './MiddleBox';

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

Hagamos lo mismo con la cajita pequeña SmallBox:

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

Coloquemos dos de estas cajitas en MiddleBox:

import SmallBox from './SmallBox';

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

Hemos construido el árbol. Y ahora queremos pasar desde nuestro App, supongamos, a SmallBox un valor de cadena 'small box :)', sin usar props, sino usando el contexto (por si nuestra aplicación de cajas crece hasta alcanzar grandes dimensiones).

Ya creamos y conectamos el archivo con el contexto MyContext.js en la lección anterior.

El siguiente paso que haremos - envolveremos BigBox en el proveedor de contexto, que es una propiedad de nuestro objeto de contexto MyContext. Ahora todos los componentes incluidos en esta construcción (y esto incluye todas las cajas anidadas en BigBox) podrán acceder y suscribirse a los cambios del contexto. Como valor del contexto pasamos el deseado 'small box :)':

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

Y ahora solo queda leer el valor del contexto. Queríamos usarlo en SmallBox, así que importemos allí el archivo de contexto MyContext.js y el hook useContext:

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

Leamos usando useContext el valor del contexto en la variable name:

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

Hemos suscrito SmallBox a este contexto y, si este cambia, este componente también se actualizará.

Y, finalmente, sustituimos el valor de la variable name en lugar de los puntos suspensivos:

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

En el componente vacío App cree el componente Parent, y en él el componente Daughter, y en Daughter el componente Grandson. Usando el contexto, pase desde App el valor de la edad 42, y con la ayuda de useContext muéstrelo en el componente Daughter.

Y ahora en el componente Grandson muestre el valor de la edad, pero dividido por 2.