Aggiornamento del contesto in React

In questa lezione esamineremo l'aggiornamento dei componenti quando cambia il valore del contesto. Supponiamo che tu voglia che il contesto cambi.

In questo caso è utile applicare il contesto in combinazione con gli stati. Modifichiamo un po' la nostra applicazione con le scatole che abbiamo realizzato nella lezione precedente e facciamo in modo che al click su un pulsante il valore trasmesso diventi 'metal box :)'.

Quindi, prendiamo il nostro file App e dopo BigBox disegniamo un pulsante:

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

Successivamente importiamo l'hook useState e creiamo uno stato name, il cui valore cambierà al click del pulsante. Impostiamo come valore iniziale quello che abbiamo immediatamente passato come valore del contesto, cioè 'small box :)':

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

Questa volta tramiteremo come contesto non una stringa, ma lo stato name:

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

Come ultimo passo chiameremo il gestore del click sul pulsante e con la funzione setName imposteremo il nuovo valore dello stato su 'metal box :)'. Dopodiché sarà possibile premere il pulsante e verificare il risultato:

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

Utilizza l'applicazione creata da te per risolvere i compiti della lezione precedente. Crea uno stato age, che invece del numero trasmetterai tramite il contesto da App, impostagli un valore iniziale di 50. Aggiungi sotto al componente Parent in App un pulsante, ad ogni click sul quale il valore dello stato age diminuirà di 2.