Actualización del contexto en React

En esta lección, consideraremos la actualización de componentes cuando cambia el valor del contexto. Supongamos que desea que el contexto cambie.

En este caso, es útil aplicar el contexto en combinación con los estados. Modifiquemos un poco nuestra aplicación de cajas que hicimos en la lección anterior y hagamos que al hacer clic en un botón el valor transmitido se convierta en 'metal box :)'.

Entonces, tomemos nuestro archivo App y después de BigBox dibujemos un botón:

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

A continuación, importemos el hook useState y creemos un estado name, cuyo valor cambiará al hacer clic en el botón. Establezcamos como valor inicial el que inmediatamente pasamos como valor del contexto, es decir, 'small box :)':

function App() {
	const [name, setName] = useState('small box :)');
}

Esta vez, pasaremos a través del contexto no una cadena, sino el estado name:

<MyContext.Provider value={name}>
	<BigBox />
	<button>click</button>
</MyContext.Provider>

Como último paso, llamaremos al controlador de clics del botón y con la función setName estableceremos el nuevo valor del estado en 'metal box :)'. Después de esto, podrás hacer clic en el botón y verificar el resultado:

<button onClick={() => {
	setName('metal box :)');
}}>click</button>

Utilice la aplicación creada por usted al resolver las tareas de la lección anterior. Cree un estado age, que en lugar del número pasará mediante el contexto desde App, establezca su valor inicial en 50. Agregue debajo del componente Parent en App un botón, en el que cada clic reduzca el valor del estado age en 2.