Actualizarea contextului în React

În această lecție vom analiza actualizarea componentelor atunci când se schimbă valoarea contextului. Să presupunem că doriți ca contextul să se modifice.

În acest caz, este util să aplicați contextul împreună cu stările. Să modificăm puțin aplicația noastră cu cutii, pe care am făcut-o în lecția anterioară și să facem astfel încât la click pe buton valoarea transmisă să devină 'metal box :)'.

Deci, să luăm fișierul nostru App și după BigBox să desenăm un buton:

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

Apoi importăm hook-ul useState și creăm o stare name, a cărei valoare va fi modificată la click pe buton. Să-i stabilim valoarea inițială pe cea pe care o transmiteam imediat ca valoare a contextului, adică 'small box :)':

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

De data aceasta, prin context vom transmite nu un șir, ci starea name:

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

Ca ultim pas, vom apela handler-ul de click pe buton și cu ajutorul funcției setName vom stabili noua valoare a stării în 'metal box :)'. După aceasta, puteți apăsa pe buton și puteți verifica rezultatul:

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

Utilizați aplicația creată de dvs. la rezolvarea sarcinilor din lecția anterioară. Creați o stare age, pe care o veți transmite în loc de număr prin context din App, stabiliți-i valoarea inițială 50. Adăugați sub componenta Parent în App un buton, la fiecare click pe care valoarea stării age se va micșora cu 2.