Ажурирање на контекст во React

Во оваа лекција ќе разгледаме ажурирање на компоненти при промена на вредноста на контекстот. Да претпоставиме дека ќе сакате контекстот да се менува.

Во овој случај е корисно да се применува контекст во комбинација со state. Ајде малку да го измениме нашето апликација со кутии, кое го правевме во претходната лекција и да направиме така што при клик на копчето вредноста што се пренесува да стане 'metal box :)'.

Значи, ќе го земеме нашиот фајл App и после BigBox ќе нацртаме копче:

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

Потоа ќе го импортираме hook-от useState и ќе креираме state name, чија вредност ќе се менува при клик на копчето. Ќе му направиме почетна вредност онаа што веднаш ја пренесувавме како вредност на контекстот, односно 'small box :)':

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

Овој пат како контекст ќе пренесуваме не стринг, туку state-от name:

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

Како последен чекор ќе повикаме handler за клик на копчето и со помош на функцијата setName ќе поставиме нова вредност на state-от во 'metal box :)'. После тоа ќе може да се кликне на копчето и да се провери резултатот:

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

Користете ја апликацијата, креирана од вас при решавање на задачите од претходната лекција. Креирајте state age, кој ќе го пренесувате наместо број со помош на контекстот од App, поставете му почетна вредност 50. Додадете под компонентата Parent во App копче, при секој клик на кое вредноста на state-от age ќе се намалува за 2.